替换元素后点击事件不起作用

Question

我得到了这个代码：

$(function () {
    $('#or').click(function () {
        $("#m0").html('<input type="text" class="highlight" name="test1"/>');
    });
});

它工作正常，它确实取代了：

Click me< /label>

使用文本输入，当我点击 #or 点击其他地方（然后它被替换为原始内容）时，问题出现，当我添加原始内容时，它不起作用。

这是我用来将替换的 #m0 上的 text input 替换为原始代码的代码：

$(function () {
    $('.m').click(function () {
        $("#m0").html('<label><input type="radio" id="or" name="type" value="1"/>Click me</label>');
    });
});

所以，为了确保您确实理解我：

原始内容是：

< code>点击我

然后我用这个来替换上面的使用文本输入：

$(function () {
    $('#or').click(function () {
        $("#m0").html('<input type="text" class="highlight" name="test1"/>');
    });
});

然后...我使用此代码恢复原始内容：

$(function () {
    $('.m').click(function () {
        $("#m0").html('<label><input type="radio" id="or" name="type" value="1"/>Click me</label>');
    });
});

最后当：

替换为：

< ;input type="radio" id="or" name="type" value="1"/>Click me

点击事件不再起作用。

Answer 1

使用 live 方法，即使在 DOM 更新后也会绑定事件 http://api.jquery.com/live/

$(function () {
    $('#or').live('click', function () {
        $("#m0").html('<input type="text" class="highlight" name="test1"/>');
    });
});

Answer 2

更新此答案是已过时。查看 JQuery.on，它结合了两全其美的优点。它允许您将事件绑定到元素，而事件本身则针对该元素内的元素。它就像 live 一样，只有您可以选择特定的目标元素（例如添加/更改 Ajaxed 内容的容器元素）。 on 取代了 live、bind 和 delegate。

原始答案（适用于1.7之前的JQuery）：正如答案所建议的，JQuery的live方法是最简单的方法，但它有一些缺点。它比较慢，因为对 DOM 的每次修改都会导致所有“活动”选择器被重新评估。

另请参阅此答案以了解一些缺点： Performance Difference Between jQuery's .live(' click', fn) 和 .click(fn)

因此，我宁愿使用 bind 或 click 将 click 事件显式绑定到新的创建的元素。这需要更多的工作（尽管如果您正确构建代码，则可以忽略不计），但它可以为您提供更好的性能和更多的控制。

Answer 3

您必须使事件处理程序live：

$('#or').live("click", function() {
    //Event hander code
});

来自 的 jQuery 文档直播：

将处理程序附加到与当前匹配的所有元素的事件
选择器，现在和将来。

问题是事件处理程序绑定到绑定时 DOM 中存在的元素。当该元素被删除时，事件处理程序也随之被删除。当您添加一个新元素（它是一个新元素，即使它看起来与旧元素相同）时，它没有绑定到它的事件处理程序。这就是 live 派上用场的地方。它监视 DOM 中添加与选择器匹配的元素，并将事件处理程序应用于任何添加的元素。

Answer 4

将 .click(...) 替换为 .live("click", ...）