jQuery的操作和重新添加不觸發

這裏是我的代碼：jQuery的操作和重新添加不觸發

$(document).ready(function(){ 
    $("#add_tactic").click(function(){ 
     var i = ($('#tactic_commentary tr').length-3)/2+1; 
     $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label">Tactic Name:</div></td><td style="width: 575px" class="auto-style1"><input maxlength="150" name="tactiname'+i+'" style="width: 565px" type="text" /></td></tr>'); 
     $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label" class="auto-style1">Tactic Description:</div></td><td style="width: 575px" class="auto-style1"><textarea name="tacticdescription'+i+'"></textarea></td></tr>'); 
    }); 
});

我#add_tactic如下：

<div id="add_tactic">Add Tactic</div>

時，該頁面加載時，上點擊事件工作正常。如果窗體中的下拉列表發生更改，則會根據您的選擇用重建的窗體替換DIV容器。 add_tactic的點擊功能在重新加載表時不起作用。表ID不會更改。刪除元素時是否有某些事情需要處理，以便在事件返回時綁定它？

來源

2013-06-12 Peter

當你刪除一個元素時，綁定到它的所有事件處理程序也被刪除。即使在具有相同ID的相同位置創建新元素也正是：新元素。您需要再次綁定事件處理程序才能使其工作。

或者，您可以將處理程序綁定到父容器和委託。

例如：

$('body').on('click', '#add_tactic', function(e) { 
    // your code here 
});

這將現在或將來的任何時間加入#add_tactic的所有實例操作。這個將指向#add_tactic元素

您可能想要將處理程序綁定到更接近#add_tactic元素的容器元素。

來源

2013-06-12 22:04:34

$（「tactic_commentary_container」）。在（「點擊」，「＃add_tactic」（函數（）{ ......那是從來沒有被移除的容器，但它不正確觸發的動作。之前或剝離後/返回 – Peter

如果我在委託處理程序中遇到問題，那麼在理解我正在執行的上下文時總會遇到一些問題。如果您可以發佈一個簡單的示例（Javascript和HTML）我可以看看 – 2013-06-12 23:30:15

不要調用remove()或覆蓋您的html，而是使用detach()方法，該方法將從DOM中刪除元素，但將關聯的數據/處理程序保存在jQuery的內存中。

var detachedHtml = $('#add_tactic').detach(); 
// later on... 
$(parentContainer).append(detachedHtml);

來源

2013-06-12 21:59:44

此外，我的答案也是一個很好的選擇。 +1。 – Ohgodwhy

你的選擇是無可置疑的更清潔，更容易實施。但是......它通常被那些爲文檔添加一百萬個事件的開發者濫用。 –

是的，有。在jQuery中我們稱之爲事件委託。

您可以通過利用jQuery的.on() 來實現事件委託。簡而言之，您需要將該函數綁定到一個不會被移除/替換的靜態元素。對於這個例子，我們將使用document，但爲了提高性能，您應該定位一個更接近靜態的元素。

$(document).on('click', '#add_tactic', function(){ 
    var i = ($('#tactic_commentary tr').length-3)/2+1; 
    $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label">Tactic Name:</div></td><td style="width: 575px" class="auto-style1"><input maxlength="150" name="tactiname'+i+'" style="width: 565px" type="text" /></td></tr>'); 
    $("#tactic_commentary tr").eq(-1).before('<tr><td style="width: 180px"><div id="form_label" class="auto-style1">Tactic Description:</div></td><td style="width: 575px" class="auto-style1"><textarea name="tacticdescription'+i+'"></textarea></td></tr>'); 
});

這將確保點擊事件觸發，無論它被刪除/替換。

來源

2013-06-12 22:00:46 Ohgodwhy

如果元素是被覆蓋的容器的一部分，那麼分離/重新附加將是不平凡的。這可能是最好的方法。 – landons

jQuery的操作和重新添加不觸發

回答

相關問題