jQuery：無法刪除動態創建的內容

好的，所以我一直在這個問題上陷入困境，我不知道爲什麼它不起作用。我創建的什麼我的程序一般是試圖做的jsfiddle：jQuery：無法刪除動態創建的內容

我jQuery是：

var count = 0; 
$("#add").on("click", function(){ 
    var html = '<div id="stuff">'; 
    count++; 
    html += '<button class="remove" id="' + count + '">Remove</button>'; 
    html += '</div>'; 
    $(html).insertBefore("#add"); 
}); 
$(".remove").on("click", function(){ 
    $(this).remove(); 
});

和我的HTML是：

<button id="add">Add</button>

基本上我有一個正在創建一些html的按鈕。這個新的html創建了一個與之關聯的按鈕，該按鈕應該允許用戶刪除該新創建的條目。我不知道爲什麼這不起作用。我已經尋找解決方案，但迄今爲止沒有任何工作。

來源

2013-02-27 user1399078

它不起作用，因爲您將點擊處理程序附加到尚不存在的元素。

如果你改變你的點擊處理程序稍微用代表，你應該罰款：

HTML：

<div class="parentElement"> 
    <button id="add">Add</button> 
</div>

JS：

$(".parentElement").on("click", ".remove", function(){ 
    $(this).remove(); 
});

來源

2013-02-27 22:38:46 Steve

OMG ......我只是意識到我做了什麼，我回來了，刪除這一點，因爲我得到了它的工作。感到愚蠢後，我得到了錯誤的電話xP謝謝你的幫助，但！ – user1399078 2013-02-27 22:45:59

當添加動態元素，如果你想要你的javacsript來實現你需要使用的這些元素.live

var count = 0; 
$("#add").live("click", function(){ 
    var html = '<div id="stuff">'; 
    count++; 
    html += '<button class="remove" id="' + count + '">Remove</button>'; 
    html += '</div>'; 
    $(html).insertBefore("#add"); 
}); 
$(".remove").live("click", function(){ 
    $(this).remove(); 
});

http://jsfiddle.net/ZNbm8/3/

編輯

在評論中所提到，live()是jQuery中的更高版本棄用（1.7+）。做到這一點，而不是：

var count = 0; 
$('body').on('click', '#add', function(){ 
    var html = '<div id="stuff">'; 
    count++; 
    html += '<button class="remove" id="' + count + '">Remove</button>'; 
    html += '</div>'; 
    $(html).insertBefore("#add"); 
}); 
$('body').on('click', '.remove', function(){ 
    $(this).remove(); 
});

以上將處理程序安裝到所有的DOM元素與一流的「刪除」或ID「添加」即是「體」，即使他們在加入中的DOM元素的後代未來。

來源

2013-02-27 22:39:55

不，不要使用['live（）']（http://api.jquery.com/live/），從jQuery 1.7開始不推薦使用（如API方法中所述）。使用['on（）']（http://api.jquery.com/on/）（jQuery 1.7+）或['delegate（）']（http://api.jquery.com/delegate/）（jQuery <1.7）。 – 2013-02-27 22:40:38

@DavidThomas我們應該使用哪個函數？ – kilkadg 2013-02-27 22:41:47

更糟... live（）從1.9中刪除。 http://api.jquery.com/live/ – 2013-02-27 22:42:32

當你插入#add之前的內容，只要抓住它的父與on()添加一個委託的事件處理程序，除去#stuff元素，像這樣：

var count = 0; 
$("#add").on("click", function(){ 
    count++; 
    var html = '<div id="stuff_' + count + '">'; 
     html += '<button class="remove" id="a' + count + '">Remove</button>'; 
     html += '</div>'; 
    $(html).insertBefore("#add"); 
}).parent().on('click', '.remove', function(){ 
    $(this).closest('[id^="stuff_"]').remove(); 
});

編輯：固定的ID的問題！

來源

2013-02-27 22:40:34 adeneo

+1優化... – DarkAjax 2013-02-27 22:44:26

另一個用於修復身份證問題的+1 ...良好的捕獲。 – Steve 2013-02-27 22:48:12

對於使用

$('.remove').live('click', function(event)

來源

2013-02-27 22:40:47 kilkadg

生活在1.7中折舊並從1.9中刪除 – 2013-02-27 22:42:12

@Eric我們應該使用哪個函數 – kilkadg 2013-02-27 22:42:42

您應該使用on（）的委託版本。看到我的答案。 – 2013-02-27 22:43:18

根據jQuery的文檔：

在jQuery 1.7的，所述.live（）方法被棄用。使用.on（）連接到事件處理程序。

所以，你也可以做這樣的使用.on()：

$("body").on("click", ".remove", function(){ 
    $(this).remove(); 
});

正如你可以在這裏看到：http://jsfiddle.net/darkajax/JWFgS/

注意：您可以爲父元素改變body ...

來源

2013-02-27 22:40:54 DarkAjax

您需要使用授權版本on才能正常工作

小提琴：

$(document).on("click", ".remove",function(){ 
    $(this).remove(); 
});

http://jsfiddle.net/DpDYq/

來源

2013-02-27 22:40:58

jQuery：無法刪除動態創建的內容

回答

相關問題