DOM 삽입 전에 jQuery 이벤트 바인딩하기

Question

DOM에 삽입하기 전에 특정 DOM 요소에 이벤트 리스너를 만들어야한다는 것이 문제입니다.

지금 일반적으로는과 같이 매우 간단합니다 :

http://jsfiddle.net/a8xjJ/

을 그러나

var button = $('<button>Click Me</button>'); 

button.on('click', function(){ alert('clicked'); }); 

$('body').append(button); 

, 문제는 내가이 예에서와 같이 다른 HTML에서 버튼을 감싸 필요가있다 단추 객체를 html 문자열과 혼합하면 이벤트 리스너가 손상됩니다. 이벤트 리스너가 객체와 접촉하는 것을 아주 논리적으로 느낄 때입니다.

제 문제는 html 문자열을 사용해야한다는 것입니다. 이는 프로젝트의 제약 사항입니다. 어쩌면 문자열에 dom 선택기를 사용할 수있는 방법이 있을까요? 아니면 위의 바이올린 작업을 만드는 또 다른 방법을 생각해 볼 수도 있습니다.

Answer 1

개체로 작업을 시작한 경우 해당 문자열 표현을 사용하지 마십시오 (셸 만 출력하고 이벤트 및 기타 데이터는 출력하지 않음). 당신이 문제의 한 가지 가능한 솔루션 :

$("<button>Click Me</button>").on("click", function(e) { 
    e.preventDefault(); 
    alert("Clicked"); 
}).wrap("<form><div></div></form>").closest("form").appendTo("div"); 

DEMO :http://jsfiddle.net/a8xjJ/2/

Answer 2

당신은 JQuery와의 .delegate() 기능을 사용하여 동적 요소를 바인딩 할 수 있습니다.

고객님의 피들을 this으로 업데이트했습니다.

var button = $('<button>Click Me</button>'); 
var html = '<form>' + button.clone().wrap('<div/>').parent().html() + '</form>'; 
$('div').append(html); 

$(document).delegate(button,'click', function(e){ 
    e.preventDefault(); 
    alert('Clicked'); 
}); 

.on()을 사용하여 동적 요소의 이벤트를 바인딩 할 수도 있습니다.

$(document).on('click', button, function(e){ 
    e.preventDefault(); 
    alert('Clicked'); 
}); 

이 메서드는 이벤트를 첫 번째 매개 변수로 사용합니다.