2014-02-26 60 views
0

,我有以下的jQuery代碼的jQuery的不能正常工作

$(".delete").on('click', function (e){ 
    e.preventDefault(); 
    var id = $(this).prop('id'); 
    console.log('Delete button id: '+id); 
    var formWrapper = $(".form-wrapper:nth-child("+id+")"); 
    console.log(formWrapper); 
    formWrapper.remove(); 
}); 

刪除.delete是上的按鈕形式

<button class="btn btn-danger delete">-<button> 

和內按鈕上之後的ynamically尋呼裝頁面已加載。所以我使用on函數在其上附加了click事件。但它不會工作,並且功能從未被調用。是不是應該不僅適用於加載期間頁面上的元素,還適用於之後加載的元素?

+0

請閱讀DOC,一切都解釋清楚。你也可以使用這個網站上的搜索字段... –

回答

5

您是說,特定的按鈕正在動態加載到DOM,因此在這種情況下,您必須使用event-delegation來使您的代碼正常工作。

正常情況下,您的代碼將在DOM加載後立即爲類.delete的元素註冊事件。實際上我們當時沒有任何具有這種身份的元素,所以這種情況下選擇event-delegation

其實我不知道你的確切DOM結構,讓我用文件來委託點擊事件,但是,你應該更喜歡這個元素的一些靜態家長來實現它,

嘗試,

$(document).on("click",".delete", function (e){ 
+0

非常感謝,曾經錯過了代表團的一部分。 – Apostolos

+0

@Apostolos很高興幫助。 –

+0

我明白了,靜態父代是指事件註冊時它必須存在於DOM上嗎? – Apostolos

5

對於動態生成的元素,您需要使用event delegation。因此使用委託事件方法使用.on()

$(document).on('event','selector',callback_function) 

使用

$(document).on('click',".delete", function (e){ 

在地方的document你應該用最接近的靜態容器。

委派事件的優點是它們可以處理後來添加到文檔中的後代元素的事件。通過選擇在委託事件處理程序附加時保證存在的元素,我們可以使用委託事件將click事件綁定到動態創建的元素,並避免頻繁附加和移除事件處理程序。

+0

哦,我看到這樣的委託發生的文件不是元素...謝謝你清除了 – Apostolos

+0

@Apostolos,很高興能幫到你 – Satpal

0

你還是使用,

$(document).on('click',".delete", function(){}); 

$(".delete").click(function(){}); 
0

您可以嘗試jQuery的委託()方法

jQuery的版本7有一個長期現場然而,在最新一期的取出,並用代表取代

您可以檢查下面的例子

HTML

< DIV CLASS =「刪除「>點擊這裏</div >

Javascript

$(document).delegate(".delete", "click", function() { 
alert("Hi") 
}); 
0

這可能幫助:http://jsfiddle.net/webcarvers/7Qtd7/

HTML:

<button id="one" class="delete"type="button">Id on me</button> 
<div id="one">This is the div to remove</div> 

JS:

$(document).ready(function(){ 
$("button.delete").on('click', function(){ 
    var id = $(this).attr("id"); 
    $("div#"+id).remove(); 
}); 
});