jquery 새 요소 이벤트 바인딩 문제solution

js의 이벤트 모니터링은 CSS의 이벤트 모니터링과 다릅니다. CSS의 스타일만 설정되어 있으면 기존이든 새로 추가하든 동일한 성능을 발휘합니다. 그러나 이벤트 수신은 그렇지 않습니다. 이벤트를 각 요소에 개별적으로 바인딩해야 합니다.

일반적인 예는 테이블을 처리할 때입니다. 각 줄 끝에 삭제 버튼이 있습니다. 이 줄을 삭제하려면 이 버튼을 클릭하세요.

코드 복사 코드는 다음과 같습니다.

tbody>

;/버튼>

보통은 이렇게 바인딩합니다

코드 복사

코드는 다음과 같습니다. jQuery( function($){ //이미 삭제 이벤트를 바인딩하기 위해 초기화된 삭제 버튼이 있습니다 $(".del").click(function() { $(this).parents(" tr").remove();

});

}); 

 모든 것이 domready 이전에 존재했던 삭제 버튼에 완벽하게 작동합니다. 그러나 domready 이후에 js를 사용하여 몇 줄을 동적으로 추가하면 새로 추가된 줄의 버튼은 효과를 잃게 됩니다. 

이 문제를 어떻게 해결하나요? 아래 4가지 해결 방법이 제공됩니다.

해결 방법 0번 - onclick 방법

구조와 동작의 분리 원칙을 무시하면 대개 이렇게 됩니다.
이때 deltr 함수는 전역 함수여야 하며 jQuery(function($) {}) 외부에 배치해야 합니다. 내부에 배치하면 로컬 함수가 되며 html에서 onclick을 호출할 수 없습니다!

코드 복사

코드는 다음과 같습니다.

jQuery(function($){ //행 추가$("#add2").click( function( ){

$("#table2>tbody").append('

')
})
})
//행을 삭제하는 함수는 domready 함수 외부에 배치되어야 합니다
function deltr(delbtn){
$(delbtn).parents("tr").remove();
};

해결 방법 1 - 반복 바인딩 공식

은 domready가 있을 때 기존 요소에 이벤트 핸들러를 바인딩하고, 을 새로 추가한 요소가 추가되면 다시 바인딩하는 것입니다.

코드 복사

코드는 다음과 같습니다.

jQuery(function($){ //삭제 버튼 이벤트 바인딩 정의//오염 방지를 위해 내부에 작성 전역 네임스페이스

function deltr(){ 
$(this).parents("tr").remove() 
}//바인딩하기 위해 이미 초기화된 삭제 버튼이 있습니다. 이벤트 삭제
$( "#table3 .del").click(deltr) 
//행 추가
$("#add3").click(function(){ 
$(' 

')
// 여기서 삭제 버튼이 다시 이벤트에 바인딩됩니다.
.find(".del").click(deltr).end()
.appendTo($("#table3>tbody")); >});
});

해결책 2 - 이벤트 버블링 방법

이벤트 버블링의 원리를 사용하여 조상에게 이 버튼 바인딩 이벤트 핸들러 함수의 요소입니다.
그런 다음 event.target 개체를 사용하여 이 이벤트가 우리가 찾고 있는 개체에 의해 트리거되었는지 확인합니다.
일반적으로 event.target.className, event.target.tagName 등과 같은 일부 DOM 속성을 사용하여 판단할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

jQuery(function($){
//넷째 삭제 테이블의 버튼 이벤트 바인딩
$("#table4").click(function(e) {
if (e.target.className=="del"){
$(e. target) .parents("tr").remove();
};
})
//네 번째 테이블의 버튼 이벤트 바인딩 추가
$("#add4") .click(function (){
$("#table4>tbody").append('')
})
})

3번 해결 방법 - 이벤트 복사 방법

위의 솔루션은 jQuery 라이브러리를 사용하지 않더라도 비교적 구현하기 쉽다고 할 수 있습니다. 하지만 이 솔루션은 jQuery에 더 많이 의존합니다. 그리고 jQuery 버전 1.2 이상이 필요합니다. 낮은 버전의 jQuery에는 플러그인이 필요합니다.
위 두 가지 솔루션 모두 삭제 기능에 많은 고민을 했고, 트리거링과 바인딩 방식을 다양하게 변경했습니다. 이 솔루션은 일반적인 순수 정적 요소와 마찬가지로 DOM 준비 시간에 바인딩될 수 있습니다. 하지만 새 줄을 추가할 때 변경해 보겠습니다. 더 이상 위와 같이 문자열을 연결하여 새 줄을 추가하고 싶지 않습니다. 이번에는 DOM 요소를 복사해 보겠습니다. 그리고 복사할 때 바인딩된 이벤트와 함께 복사한 후 찾기 등을 사용하여 내부 요소를 수정합니다.
동시에 이 예와 같이 모든 요소를 삭제하려면 템플릿이 필요합니다. 삭제하지 않으면 템플릿을 사용할 필요가 없습니다. 실수로 삭제되는 것을 방지하기 위해 여기에 템플릿을 숨겼습니다.
jQuery에서 고유한 clone(true)을 사용했습니다

코드를 복사합니다 코드는 다음과 같습니다.

.template{display:none;}

;

(function($){
//다섯 번째 테이블의 버튼 이벤트 바인딩 삭제
$("#table5 .del").click(function() {
$(this) .parents("tr ").remove();
});
//다섯 번째 테이블의 버튼 이벤트 바인딩 추가
$("#add5").click(function(){
$("# table5>tbody>tr:eq(0)")
//이벤트와 함께 복사
.clone(true)
//템플릿 태그 제거
.removeClass( "template")
//내부 요소 수정
.find("td:eq(0)")
.text("새 행")
.end()
/ /테이블 삽입
.appendTo($("#table5>tbody"))
})

전체 의견:

위의 4가지 옵션에는 장점과 단점이 있습니다.
플랜 No. 0, 구조와 동작이 분리되지 않고 전역 네임스페이스를 오염시킵니다. 가장 권장되지 않습니다. 그래서 나는 그것을 계획이라고 생각하지도 않습니다. 하지만 js 초보자의 경우 긴급 프로젝트에 사용할 수 있습니다.
옵션 1, 아주 만족스럽습니다.
옵션 2, 이 방법은 js 이벤트 버블링의 장점을 최대한 활용합니다. 그리고 가장 효율적입니다. 그러나 동시에 이 솔루션은 jQuery의 강력한 선택기를 무시하기 때문에 관련된 요소 속성 요구 사항이 너무 많으면 더 문제가 될 것입니다. 당신은 많은 if 조건의 옳고 그름 관계 사이에서 헤매게 될 것입니다. 나중에 나는 jQuery에서 조건으로 $(event.target).is(selector)를 사용할 수 있다는 것을 기억했습니다. 이는 개발 효율성을 크게 향상시킬 수 있지만 실행 효율성은 약간 감소합니다.
플랜 3번, 구조와 행위의 분리 사상을 가장 잘 구현한 플랜이라고 생각합니다. 하지만 단점도 명확하다. jQuery에 대한 의존도가 너무 높다. 그렇지 않으면 이벤트를 함께 복사하는 함수를 작성해야 하는데, 이는 초보자에게는 분명히 매우 어렵다. 그러나 미래 동향의 관점에서 볼 때 이 솔루션은 여전히 적극 권장됩니다.

어떤 플랜을 선택할지는 정해져 있지 않습니다. 이는 프로젝트와 js 숙달도, 구조와 동작의 분리 아이디어에 따라 달라집니다. 가장 적합한 것이 가장 좋습니다.

추가:

계획 3을 완벽한 구조-행동 분리 스타일로 전환하세요.
우선 with template는 템플릿 요소입니다. 실수로 삭제되는 것을 방지하기 위해 모든 복사본의 원본이 표시되지 않도록 설정되어 있습니다. 조명이 제거되지 않는 경우에도 이 템플릿 요소는 선택 사항입니다. 반복을 위해 기존 요소를 복사할 수 있기 때문입니다.
두 번째로, 반복되는 각 요소에 반복을 추가하여 삭제 버튼을 사용하여 이 수준의 요소를 쉽게 찾을 수 있습니다. 이는 선택 사항이며 때로는 필수가 아닙니다.
마지막으로 수정하려는 각 요소에 클래스를 추가하여 find를 사용하여 찾을 수 있도록 합니다. 예를 들어 여기에 콘텐츠 클래스가 있고 새로 추가된 콘텐츠 클래스는 내부 값을 수정할 수 있습니다.
이렇게 하면 구조와 행위가 완벽하게 분리된 사례가 완성됩니다.

코드 복사 코드는 다음과 같습니다.

tr>

>

이 줄에는 원래	Delete
삭제
새 행

새 행
Delete
새 행 추가
템플릿은 다음과 같습니다
이 줄은 원래
이 줄에는 원래
템플릿은 다음과 같습니다.

이 줄에는 원래

jQuery(function($){
//6번째 테이블의 버튼 이벤트 바인딩 삭제
$("#tbody6 .del" ).click(function() {
$(this).parents(".repeat").remove();
})
//6번째 테이블에 대한 버튼 이벤트 바인딩 추가
$("#add6") .click(function(){
$("#tbody6>.template")
//이벤트와 함께 복사
.clone(true)
/ /템플릿 태그 제거
. RemoveClass("템플릿")
//내부 요소 수정
.find(".content")
.text("새 줄")
.end ()
//테이블 삽입
.appendTo($("#tbody6"))
});
});

마찬가지로 이 js도 다음 html 구조에 적용 가능합니다

코드 복사

>

< ;/li>