jquery live 방법, jquery 동적 추가 단추가 클릭 이벤트를 터치할 수 없는 문제 해결

1668 단어 JavaWeb 개발
jquery를 공부하는 과정에서 이런 작은 응용을 한 적이 있다. 즉, 동적으로 정보를 표에 추가하면 표에 마지막으로 삭제 단추가 있는데 그 결과 jquery가 추가한 단추로 클릭하면 jquery에 정의된 클릭 이벤트를 터치할 수 없다.여러 가지 방법의 시도를 통해 jquery의live() 방법이 이 문제를 해결할 수 있음을 발견하였다.
먼저 API 문서에서 라이브()에 대한 개요를 보여 줍니다.
    
jQuery는 일치하는 모든 요소에 이벤트 처리 함수를 추가합니다. 이 요소는 나중에 추가해도 유효합니다.
이 방법은 기본적으로 그렇다.bind () 방법의 변체사용하다.bind () 시 선택기가 일치하는 요소는 이벤트 처리 함수를 추가하고, 이후에 추가된 요소는 없습니다.이를 위해 한 번 더 사용해야 한다.bind()여야 합니다.예컨대

  
Click here

이 요소에 간단한 클릭 이벤트를 연결할 수 있습니다.
$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

요소를 클릭하면 경고 상자가 팝업됩니다.그리고 그 다음에 또 다른 원소가 첨가되었다고 상상해 보세요.
$('body').append('
Another target
');

비록 이 새로운 요소는 선택기 ".clickme"와 일치할 수 있지만, 이 요소는 호출되고 있기 때문입니다.bind () 다음에 추가되었기 때문에 이 요소를 클릭하면 아무런 효과가 없습니다.
   .live ()는 이런 상황에 대응하는 방법을 제공했다.만약 우리가 이렇게 클릭 이벤트를 연결한다면:
$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

그런 다음 새 요소를 추가합니다.
$('body').append('
Another target
');

그리고 새로 추가된 요소를 클릭하면 이벤트 처리 함수를 터치할 수 있습니다.
live()는 처음 발생한 문제를 해결할 수 있으며 코드는 다음과 같이 쓸 수 있습니다.
 
$("input[value=  ]").live("click",function(){
		$(this).parent().parent().remove();
	})

이렇게 쓰면 원래 페이지에 있는 '삭제' 단추든 뒤에 동적으로 추가된 '삭제' 단추든 클릭 이벤트를 터치할 수 있습니다.

좋은 웹페이지 즐겨찾기