Question

为什么在使用 .empty（）方法后，点击事件不再有效？

$(document).ready(function(){
    var a = "<button>click</button>";
    $("p").append(a);
    $("button").click(function(){
        alert("ok");
        $("p").empty();
        // it disappears
        $("p").append(a);
        // it reappears but if I click it again it doesn't work
    });
});

...

<p></p>

由于我有一个全局创建按钮的程序，我必须经常放置它并将其删除，但在第一次使用后，没有任何反应。

var checkAnswer = $("<button>",
{
    text: 'Check',
    click: function () {
    // do something

    }
});

Answer 1

静态事件处理程序附加到特定的DOM元素。如果你删除了那个DOM元素（你正在使用.empty()并创建一个新的DOM元素（你正在使用.append()），那么附加到现在删除的DOM元素的原始事件处理程序就会消失。 / p>

在jQuery中，感觉就像是将事件附加到选择器，但是当你使用.on()或.click()的静态形式时（就像你一样），当你使用时，选择器会被评估一次最初安装事件处理程序。该选择器变为DOM元素列表，并且在该特定时间的那些DOM元素将事件处理程序附加到它们。如果您以后创建也与该选择器匹配的新DOM元素，则它们上不会有任何事件处理程序。

委托事件处理可用于解决某些类型事件的此问题。

您的选择是：

不要替换DOM元素（可能只是替换其内容）
在创建新DOM元素后，将事件处理程序附加到新创建的DOM元素。
使用委托事件处理将事件处理程序附加到更高级别的DOM对象（您未删除的父级），并查找在已冒泡到静态父级的子对象上发生的事件。

如果您想了解有关委派事件处理的更多信息，请参阅以下其他一些解释：

Does jQuery.on() work for elements that are added after the event handler is created?

jQuery .on does not work but .live does

jQuery .live() vs .on() method for adding a click event after loading dynamic html

JQuery Event Handlers - What's the "Best" method

empty（）方法中断动态事件

1 个答案: