Question

我收到了这段代码：

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

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

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

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

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

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

所以，确定你确实了解我：

原始内容是：

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

然后我用它来替换上面的文本输入：

$(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="text" class="highlight" name="test1"/>

替换为：

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

点击事件不再有效。

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) and .click(fn)

因此，我宁愿使用bind或click将click事件显式绑定到新创建的元素。这是一个更多的工作（虽然如果你正确地构造你的代码可以忽略），它会给你更好的性能和更多的控制。

Answer 3

您必须制作事件处理程序live：

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

来自live的jQuery文档：

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

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

Answer 4

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

替换元素后，Click事件无效

4 个答案: