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

我编写下一个代码：

<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();
}

当我按“按id搜索”时，它会变成一个按钮，然后，在1分钟后，它会返回为“按id搜索”

---

但当我再次按下它时，什么也没有发生。为什么我不能再次获得按钮？

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

将事件处理程序更改为位于文档上，并在匹配特定选择器时进行处理。这样，将为满足选择器条件的每个新元素激发事件处理程序：

$(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);
});

---

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

将事件处理程序更改为位于文档上，并在匹配特定选择器时进行处理。这样，将为满足选择器条件的每个新元素激发事件处理程序：

$(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);
});

---

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

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

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

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

setTimeout(change, 1250);

---

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

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

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

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

setTimeout(change, 1250);

---

用post span替换搜索框后，不会将单击事件重新绑定到该span

这里的例子，即使我认为不是很美：

---

用post span替换搜索框后，不会将单击事件重新绑定到该span

这里的例子，即使我认为不是很美：

---

您可以通过隐藏文本和取消隐藏已存在但隐藏的按钮来实现此目的

您可以通过隐藏文本和取消隐藏已存在但隐藏的按钮来实现此目的

使用以下方法：您正在更改功能下添加post 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();
    }

---

使用此选项：您正在“更改”功能下添加post 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();
    }

---

我已经更新了小提琴

第一次单击“按id搜索”时，必须将其重新绑定到post。因为，您正在从DOM中删除元素，因此事件侦听器也将被删除。当您重新添加元素时，jQuery对它一无所知，因此侦听器无法工作

您需要使用事件委派

---

请参阅此处的文档

我已经更新了小提琴

第一次单击“按id搜索”时，必须将其重新绑定到post。因为，您正在从DOM中删除元素，因此事件侦听器也将被删除。当您重新添加元素时，jQuery对它一无所知，因此侦听器无法工作

您需要使用事件委派

请参阅此处的文档