使用jQuery .html()替换内容后表单按钮.click()事件失效原因咨询

• 你一开始给#signInBtn绑定click事件时，这个按钮是#otherScreens里的初始DOM元素。但之后通过mainContentArea.html(onPageContent)把表单内容移到#mainContent时，相当于把原来的按钮从DOM中移除，再将表单HTML重新插入到目标区域——新插入的按钮是全新的DOM元素，没有继承原来的事件绑定，所以点击不会触发。
• 绑定到#mainContent能生效，是因为利用了事件委托机制：父元素是页面初始就存在的DOM节点，它可以通过事件冒泡捕获到子元素（动态生成的按钮）的点击事件。

方法1：动态插入内容后再绑定事件 #

把事件绑定代码放到$(document).ready内部，在html()插入内容之后执行，确保绑定的是新生成的按钮：

const mainContentArea = $('#mainContent');
let onPageContent = $('#loginForm').html();

$(document).ready(function () {
    mainContentArea.html(onPageContent);
    // 插入内容后，给新的按钮绑定事件
    $('#signInBtn').click(function (event) {
        event.preventDefault();
        console.log("Hello world!");
    });
});

方法2：使用事件委托（推荐） #

直接把事件绑定到始终存在的父元素（比如#mainContent），通过事件委托监听动态生成元素的事件，无需每次更新DOM后重新绑定：

const mainContentArea = $('#mainContent');
let onPageContent = $('#loginForm').html();

$(document).ready(function () {
    mainContentArea.html(onPageContent);
});

// 事件委托：监听#mainContent内部的#signInBtn点击事件
$('#mainContent').on('click', '#signInBtn', function (event) {
    event.preventDefault();
    console.log("Hello world!");
});

事件委托的优势在于：不管子元素是页面初始就存在，还是后续动态生成的，只要匹配选择器，事件都会被触发，更适合频繁更新DOM的场景，代码也更简洁易维护。

内容的提问来源于stack exchange，提问作者omadume