javascript - Jquery - 删除附加代码不起作用

Question

我在删除附加代码时遇到问题。
尝试添加一些 div 并检查结果。
当您尝试对新 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('');
 }
});

这是 我使用 jquery 2.0.3的JSFiddle 。

Answer 1

绑定单击事件时，您的元素不存在。使用委托事件：

$('#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();
});

小提琴示例

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);

小提琴手