나는 JavaScript와 jQuery를 배우고 있기 때문에 이것이 어리석은 질문이라면 미리 사과드립니다.
(function ($) {
$.fn.addDiv = function () {
this.append('<div></div>');
return this;
};
}(jQuery));
$('div').click(function () {
$('body').addDiv();
});
위의 코드 <div>에서 현재 값에 요소를 추가하는 간단한 jQuery 플러그인을 작성했습니다 this.
이제 요소를 클릭하고 몇 가지 <div>요소를 추가 한 후 클릭 처리기가 새로 추가 된 요소와 연결되지 않음을 알게되었습니다. 핸들러 함수가 바인드되었을 때 자연스럽게 존재하고 따라서 $('div')객체 에 존재했던 것들에게만 해당했기 때문에 이것은 완벽하게 수용 가능해 보입니다 .
이제 <div>플러그인 내의 모든 요소에 핸들러를 바인딩하는 것이 다음과 같이 간단 하다는 것을 알고 있습니다.
(function ($) {
$.fn.addDiv = function () {
this.append('<div></div>');
$('div').click(function () {
$('body').addDiv();
}); // added this statement
return this;
};
}(jQuery));
그러나 이러한 이벤트 바인딩을 처리하는 더 좋은 방법이 있다고 확신합니다. 이것은 분명히 코드를 복제합니다. 그렇다면 플러그인 자체가 추가하는 요소에 대한 이러한 이벤트 바인딩과 관련하여 모범 사례는 무엇입니까?
이것은 교육적인 예입니다. 어떤 종류의 사용 사례로 간주하지 말고 대체 솔루션을 제공하십시오.
http://jsbin.com/jokururiyaca/1/edit
편집 : 일부 사람들은 사용을 권장 .selector하지만 jQuery 2에서는 더 이상 사용되지 않는다는 것을 알고 있습니다 . 또한이를 사용하면 이벤트 처리 코드가 플러그인 내에서 여전히 중복된다는 사실이 변경되지 않습니다.
이것은 클릭 핸들러를 모든 요소에 다시 바인딩하는 문제를 해결할 수있는 한 가지 방법입니다.
를 사용하여 DOM 요소를 만들고을 사용하여 $('<div></div>')해당 요소에만 클릭 핸들러를 $('<div></div>').click(...)추가 한 다음을 사용하여 본문에 추가 할 수 $('<div></div>').click(...).appendTo("body")있습니다.
예:
(function ($) {
$.fn.addDiv = function () {
$('<div></div>').click(function () {
$('body').addDiv();
}).appendTo("body");
return this;
};
}(jQuery));
일반적으로 이벤트 위임 은 향후 요소에 대한 이벤트를 처리하는 데 사용됩니다.
예:
(function ($) {
$.fn.addDiv = function () {
this.append('<div></div>');
return this;
};
}(jQuery));
$(document).on("click", "div", function(){
$('body').addDiv();
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다