聲明的jQuery函數不適用於新創建的項目

Question

此函數將<button>替換為<button> <input>和<button> ：

<button id="add3" class="button">Add...</button>



$(function(){
   $('#add3').click(function () {
      $(this).replaceWith('<input id="edit3" class="input" type="text" placeholder="Enter 3-rd option..." /><button id="add4" class="button">Add...</button>');
    });
 });

因此，當您按下“添加...”按鈕時，將出現一個輸入字段，並且還會顯示另一個“添加...” <button>

我想做的下一件事是用一個<input>字段替換新創建的Add <button> ，因為限制是4個輸入字段。 我可以通過運行以下功能來做到這一點：

$(function(){
    $('#add4').click(function() {
        $(this).replaceWith('<input id="edit4" class="input" type="text" placeholder="Enter 4-th option..." />');
    });
});

但事實是，正如我猜想的那樣，它並未將已聲明的功能應用於新創建的元素。 有什么辦法可以使其運行？

謝謝您的回復！

Answer 1

您需要使用.on（）使用事件委托

http://jsfiddle.net/r2gCu/

$('#add3').click(function () {
      $(this).replaceWith('<input id="edit3" class="input" type="text" placeholder="Enter 3-rd option..." /><button id="add4" class="button">Add...</button>');
    });

 $(document).on('click','#add4' ,function() {
        $(this).replaceWith('<input id="edit4" class="input" type="text" placeholder="Enter 4-th option..." />');
    });

當您僅綁定click事件時，它將僅綁定到現有DOM元素，因此您要將事件綁定到父元素（例如：-我使用過文檔，但可以使用像div這樣已經存在的容器或其他內容），然后您使用與該容器相同的選擇器添加的任何元素都可以通過委派使用該事件。

從Jquery Docs

委派事件的優勢在於，它們可以處理來自后代元素的事件，這些事件在以后的時間添加到文檔中。 通過選擇保證在附加委托事件處理程序時會出現的元素，您可以使用委托事件來避免頻繁附加和刪除事件處理程序的需要。 例如，如果事件處理程序想要監視文檔中的所有冒泡事件，則此元素可以是Model-View-Controller設計中視圖的容器元素，也可以是文檔。 在加載任何其他HTML之前，document元素位於文檔的開頭，因此可以在其中附加事件，而不必等待文檔准備就緒。