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

여기 JSFiddle
나는 JQuery와 2.0.3를 사용합니다.

Answer 1

클릭 이벤트를 바인딩 할 때 요소가 없습니다. 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

에 추가하기 전에 이벤트를 할당하는 것