Question

我写下一段代码：

<span id="post">search by id</span>


$("#post").click(function () {
    var input = $("<input type='text' id='input_find_by_id'><button type='button' id='button_search_by_id'>Click Me!</button>");
    $(this).replaceWith(input);
    setTimeout(function() {change();},1250);
});


function change() {
    var input = $("<span id='post'><u>search by id</u></span>");
    $("#input_find_by_id").replaceWith(input);
    $("#button_search_by_id").remove();
    //input.select();
}

http://jsfiddle.net/alonshmiel/APjyy/2/

当我按“按ID搜索”时，它会变成一个按钮，然后，1点之后，它将返回“按ID搜索”。

但是当我再次尝试按下它时，什么也没发生。为什么我不再按钮了？

Answer 1

您新创建的元素上不再有事件处理程序。

将事件处理程序更改为文档，并在匹配特定选择器时进行处理。这样，您的事件处理程序将针对符合选择条件的每个新元素触发：

$(document).on('click', '#post', function () {
    var input = $("<input type='text' id='input_find_by_id'><button type='button' id='button_search_by_id'>Click Me!</button>");
    $(this).replaceWith(input);
    setTimeout(function() {change();},1250);
});

Answer 2

当您将原始范围替换为其他内容时，您可以有效地从DOM中删除该元素 - 以及附加到其上的任何事件。当你再次添加你的span（在change函数中）时，它是一个新创建的元素，它没有附加任何事件处理程序 - 你需要再次附加事件处理程序。

解决此问题的替代方法是使用jQuery on函数附加“实时”事件处理程序：

$(document).on('click', '#post', function () {
    ...
});

此外，由于您只在setTimeout中调用一个没有参数的函数，因此可以将其简化为

setTimeout(change, 1250);

Answer 3

用“post”范围替换搜索框后，您不会将click事件重新绑定到该范围。

这里的例子，即使我认为不是很漂亮：http://jsfiddle.net/APjyy/5/

function change() {
    var input = $("<span id='post'><u>search by id</u></span>");

    $("#input_find_by_id").replaceWith(input);
    $("#button_search_by_id").remove();
    //input.select();

    $("#post").click(function () {
        var input = $("<input type='text' id='input_find_by_id'><button type='button' id='button_search_by_id'>Click Me!</button>");
        $(this).replaceWith(input);
        setTimeout(function () {
            change();
        }, 1250);
    });
}

Answer 4

您可以通过隐藏文本并取消隐藏已存在但隐藏的按钮

来完成此操作

Answer 5

使用此：您正在添加＆＃34;发布＆＃34;更改（）函数下的id元素：

$("#post").click(function () {
        var input = $("<input type='text' id='input_find_by_id'><button type='button' id='button_search_by_id'>Click Me!</button>");
        $(this).replaceWith(input);
        //setTimeout(function() {change();},1250);
    });


    function change() {
        var input = $("<u>search by id</u>");
        $("#input_find_by_id").replaceWith(input);
        $("#button_search_by_id").remove();
        //input.select();
    }

Answer 6

我已经更新了小提琴。 http://jsfiddle.net/APjyy/6/

首次点击“search by id”时，您必须rebind到"#post"。因为，您要从DOM中删除元素，因此事件侦听器也会被删除。当你重新添加元素时，jQuery对它一无所知，因此监听器不起作用。

您需要使用事件delegation。

$("body").on('click', '#post' , function () {

});

请参阅此处的文档。 http://api.jquery.com/on/

将文本更改为按钮不起作用

6 个答案: