dom 요소에 click 등의 이벤트를 바인딩하는 것이 유효하지 않은 문제 해결 방법

이전에는 js 플러그인이 생성한 요소에서 click 이벤트가 유효하지 않은 문제를 반복적으로 만났고, 재바인딩도 안되었지만, 결국 해결 방법을 찾았습니다. 여기서 기록합니다.

또한 js 이벤트 처리 기제에 대한 이해를 더욱 깊게합니다.

1. 이벤트가 해제됨

이 경우 click 이벤트는 일반적으로 click 이벤트가 실패하지 않지만, 다음과 같은 경우 click 이벤트는 실패합니다:

$(function(){
 $('.btn').unbind()
})
$('.btn').click(function(){
 //...
 })

따라서, click 이벤트는 좋은 습관이어야 합니다:

$(function(){
 $('.btn').click(function(){
 //...
 })
}) 

2. js 플러그인 비동기/동적로 DOM을 로드

대체로 대기 시간/시작 실행 시간을 포함합니다: WaitTime

이때 직접 바인딩/감청은 유효하지 않습니다：

$(function(){
 $('.container .btn').on('click',function(){
 //...
 })
}) 

해결 방법1：

$(function(){
 setTimeout(function{ 
 $('.container .btn').click(function(){}
  //...
  })
 //.btn 로드 후 이벤트 
 },WaitTime) 
}) 

해결 방법2(이벤트 대리, 부모 요소에 위임):

$(function(){
 $('.container').on('click','.btn',function(){
 //...
 })
}) 

3. ajax 동기적으로 로드된 dom

• done() 함수 내에서 클릭 이벤트를 추가할 수 있습니다
• 동일2의 이벤트 대리 메서드.

4. 링크 클릭에 반응하지 않습니다

다음 코드는 a 태그의 href이 있어도 점프할 수 없게 합니다

$(function(){
 $('a').on('click',function(e){
 e.preventDefault()
 //...
 })
}) 

해결 방법:

$(function(){
 $('a').on('click',function(e){
 e.preventDefault()
 //...
 })
 $('a').unbind()
})

결론

1.이벤트 바인딩, 이벤트 리스너, 이벤트 대리 관련 링크

2.이벤트 캡처와 버블 관련 링크

 target.addEventListener(type, listener[, options]);
 target.addEventListener(type, listener[, useCapture]);

이벤트 캡처

부모 요소가 먼저 발생하고, 자식 요소가 나중에 발생합니다

이벤트 버블

자식 요소가 먼저 발생하고, 부모 요소가 나중에 발생합니다

3.javascript 실행 순서

이 글의 모든 내용이 끝납니다. 이 글의 내용이 여러분의 학습이나 업무에 도움이 되길 바랍니다. 또한,呐喊 강의에 많이 지지해 주세요!

명시: 이 글의 내용은 인터넷에서 가져왔으며, 저작권자에게 속하며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용으로, 이 사이트는 소유권을 가지지 않으며, 인공적인 편집을하지 않았으며, 관련 법적 책임도 부담하지 않습니다. 저작권 문제가 있는 내용을 발견하면 notice#w로 이메일을 보내 주세요.3codebox.com에 이메일을 보내서 #을 @으로 변경하고 신고하시고, 관련 증거를 제공하시면, 실제로 확인되면 이 사이트는 즉시 저작권 침해 내용을 제거할 것입니다.