標明的jQuery函數不與新建項目工作

Question

此函數替換一個<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>

我想要做的下一件事，是取代新創建的添加<button>只有一個<input>字段，因爲限制是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的文檔

委託事件有優勢，他們可以處理來自被添加到該文件在稍後的時間後代元素的事件。通過選擇在委託事件處理程序附加時保證存在的元素，可以使用委派事件來避免頻繁附加和刪除事件處理程序的需要。該元素可以是模型 - 視圖 - 控制器設計中的視圖的容器元素，例如，如果事件處理程序想要監視文檔中的所有冒泡事件，則可以是文檔。在加載任何其他HTML之前，文檔元素在文檔的頭部可用，因此在不等待文檔準備就緒的情況下在其中附加事件是安全的。