jQuery를 클릭 기능 다양한 방법

Question

안녕하세요 저는 jQuery를 함께하고 있어요 Ajax 호출을 가지고

첫 번째 클릭에 요소를 선택하는 이러한 방법의 차이가 무엇인지 궁금 해서요

$(this).on('click', 'button', function(){ }); 

SECOND

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

THI RD

$('button').click(function { }); 

내 Ajax 호출 내 데이터베이스에서 새 데이터를 선택하고 성공에 컨텐츠를 업데이트하고 내가 ID로 버튼이 데이터 개체, 작품의 첫 번째하지만 두 번째와에서 데이터를 변경 세 번 모두 한 번만 작동하면 실패하고 나는 왜 미리 고마워하는지 궁금 하네! 문서 당으로

Answer 1

: 당신이 당신의 예에서 보여으로

.click() 

이 방법은 꽤 많이 있습니다 CSTE 연구진에 대한 바로 가기 ('클릭', 핸들러)

입니다 동일하지만, 당신은 dinamically 위임 할 수 있으므로 on() 메서드를 사용해야합니다.

.on() 메서드는 jQuery 개체의 현재 선택된 집합 에 이벤트 처리기를 연결합니다. .on() 메서드 은 jQuery 1.7부터 이벤트 처리기를 연결하는 데 필요한 모든 기능을 제공합니다.

예 : 그 코드는 AJAX 요청을 더한 경우, 해당 테이블 내에서 생성되는 모든 요소에 경고를 트리거하고 이벤트 핸들러가 될 것 같은 테이블에 추가됩니다

$("#dataTable tbody").on("click", "tr", function(event){ 
    alert($(this).text()); 
}); 

dinamically 붙어있다.

on() 대리인이 this을 확인하는 방법에 대해 자세히 알아 보려면 문서에서

Answer 2

는 :

$('button').click(function { }); 

이 방법은 ('클릭', 핸들러)

은 그래서 동일합니다 CSTE 연구진에 대한 바로 가기 무엇 :

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

$(this)과 $('button')의 차이가 범위입니다. 첫 번째 경우에는 closure에서 요소에 대한 핸들러가 있습니다. 초에 선택기를 사용하면 모든 button에 대한 클릭 이벤트를 문서에 첨부한다는 의미입니다.

Answer 3

.on()을 사용하여 이벤트를 아직 존재하지 않는 요소에 바인딩 할 수 있습니다.예를 들어 div에 ajax 응답을 넣으면 이벤트를 먼저 정의하고 div에 바인딩하지만 트리거를 다른 요소로 설정할 수 있습니다. 예를 들어

: 당신이 있기 때문에 첫 번째는 & 작동

$('div').on('click','button',function(){}); 

Answer 4

이유는없는 다른이는 아마 오버 쓰는 당신이 당신의 아약스 호출 후에서 버튼을 덮어 쓰기 이벤트를, on()을 사용하여 위임을 사용하는 모든 지점을 무효화합니다. Ajax 호출이 완료되면 첫 번째 이벤트 핸들러를 사용하거나 이벤트 핸들러를 다시 작성하십시오.