追加元素后，事件click在jquery中的追加元素上不起作用

基础概念

在jQuery中，当你动态地向DOM中添加新的元素时，这些新元素默认情况下不会绑定到已经存在的事件处理器上。这是因为事件处理器通常是在页面加载时绑定到特定的元素上的，而新添加的元素在绑定事件时并不存在。

问题原因

当你使用append或其他类似的方法向DOM中添加新元素时，这些新元素并没有自动绑定到之前定义的事件处理器上。因此，即使你为新元素添加了click事件，这些事件也不会触发。

解决方法

有几种方法可以解决这个问题：

方法一：事件委托（推荐）

事件委托是一种将事件处理器绑定到父元素上，然后通过事件冒泡机制来处理子元素事件的技术。这样，即使子元素是动态添加的，事件处理器也能正常工作。

$(document).ready(function() {
    // 绑定事件处理器到父元素上
    $('#parentElement').on('click', '.newElement', function() {
        // 处理新元素的点击事件
        console.log('New element clicked!');
    });

    // 动态添加新元素
    $('#parentElement').append('<div class="newElement">Click me!</div>');
});

在这个例子中，我们将click事件处理器绑定到#parentElement上，并指定只有当点击的元素匹配.newElement选择器时才触发事件处理器。

方法二：重新绑定事件

你可以在每次添加新元素后，重新绑定事件处理器。这种方法虽然简单，但在元素频繁添加的情况下效率较低。

$(document).ready(function() {
    // 定义事件处理器
    function handleClick() {
        console.log('New element clicked!');
    }

    // 动态添加新元素并绑定事件处理器
    $('#parentElement').append('<div class="newElement">Click me!</div>');
    $('.newElement').on('click', handleClick);
});

在这个例子中，每次添加新元素后，我们都会重新绑定click事件处理器。

应用场景

事件委托特别适用于以下场景：

• 动态生成的元素需要绑定事件。
• 大量元素需要绑定相同事件，减少事件处理器的数量以提高性能。

参考链接

• jQuery .on() 方法
• 事件委托

通过上述方法，你可以确保动态添加的元素能够正确响应click事件。