jQuery的 - 刪除附加代碼沒有奏效

Question

我有問題，消除附加代碼。
嘗試添加一些div的檢查結果。
當您嘗試dblclicked新格，他將不會被刪除。

HTML：

<input id="val" name="value" /> 
<input id="submit" type="button" value="ok" /> 
<div id="content"></div> 

腳本：

$("div[id^='block_']").on('dblclick', function() { 
$(this).remove(); 
}); 

$("#submit").click(function(){ 
if ($('#val').val().length > 0) 
{ 
    $('#content').append('<div id="block_'+ $('#val').val() +'">'+ $('#val').val() +'</div>'); 

    $('#val').val(''); 
} 
}); 

這裏的JSFiddle
使用jQuery 2.0.3。

Answer 1

當你綁定click事件時，你的元素不存在。使用delegeted事件：

$('#content').on('dblclick', "div[id^='block_']", function() { 
    $(this).remove(); 
}); 

這裏所有您需要的信息：http://api.jquery.com/on/#direct-and-delegated-events

Answer 2

隨着你的div是動態生成所以使用事件代表團.on()：

$(document.body).on('dblclick',"div[id^='block_']", function() { 
    $(this).remove(); 
}); 

Fiddle Example

Answer 3

爲什麼你的代碼中有這部分？

$("div[id^='block_']").on('dblclick', function() { 
$(this).remove(); 
}); 

如果你這樣做是因爲你想選擇一個div標籤的ID作爲選擇器，你不必這樣做。

例如，如果你想刪除你可以這樣做：

$("#content").on('dblclick', function() { 
$(this).remove(); 
}); 

Answer 4

另一種方式是創建div和追加到DOM

var div = $('<div id="block_'+ $('#val').val() +'">'+ $('#val').val() +'</div>'); 

div.on('dblclick',function(){$(this).remove();}); 
$('#content').append(div); 

jfiddle

前分配事件