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

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 更新后也会绑定(bind)事件 http://api.jquery.com/live/

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