Jquery动态追加的元素无法触发点击事件


如果你遇到动态追加的 HTML 无法触发点击事件的问题,可以通过事件委托来解决。事件委托的基本思想是将事件监听器绑定到一个静态的父元素上,而不是直接绑定到动态生成的元素上。这样,当事件冒泡到父元素时,可以通过检查事件的目标元素来处理事件。

示例代码

假设你的 HTML 结构如下:

<div id="container">
    <!-- 动态添加的按钮将插入到这里 -->
</div>

JavaScript 代码

$(document).ready(function() {
    // 使用事件委托绑定点击事件
    $('#container').on('click', '.dynamic-button', function(event) {
        // 处理点击事件的逻辑
        console.log('动态按钮被点击了');
    });

    // 示例:动态添加按钮
    function addDynamicButton() {
        var button = $('<button class="dynamic-button">点击我</button>');
        $('#container').append(button);
    }

    // 添加一个动态按钮
    addDynamicButton();
});

声明:初心|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Jquery动态追加的元素无法触发点击事件


愿你勿忘初心,并从一而终