jQuery on()_jquery를 사용하여 동적 요소를 바인딩할 때 발생하는 문제 요약

jQuery on() 메서드는 이벤트 바인딩을 위해 공식적으로 권장되는 메서드입니다. on() 메서드를 사용하여 지정된 이벤트를 추가 등 미래에 동적으로 생성되는 동적 요소에 바인딩합니다.

이전에 쓸땐 항상 그랬어요

$("").on('click','function(){ 
}') 

나중에 바인딩할 수 없는 경우가 있다는 사실을 발견했습니다(예: 요소가 동적으로 생성되는 경우). 문서를 확인한 후 올바른 사용법은

$(document).on("change","#pageSize_out",function(){ 
if($("#page_out").val()!=0){ 
$("#pageSize").val($(this).val()); 
list(); 
} 
}) 

또한 참고해주세요

이 답변은 많은 관심을 받고 있으므로 다음 두 가지 보충 조언을 드립니다.

1) 가능하다면 이벤트 리스너를 가장 정확한 요소에 바인딩하여 불필요한 이벤트 처리를 방지하세요.

That is, if you're adding an element of class b to an existing element of id a, then don't use
$(document.body).on('click', '#a .b', function(){
but use
$('#a').on('click', '.b', function(){

2) ID가 있는 요소를 추가할 때 두 번 추가하지 않도록 주의하세요. HTML에서 동일한 ID를 가진 두 요소를 갖는 것은 "불법"일 뿐만 아니라 많은 부분이 깨집니다. 예를 들어 선택기 "#c"는 이 ID를 가진 요소 하나만 검색합니다.

on(events,[selector],[data],fn)

이벤트: 공백과 선택적 네임스페이스(예: "click" 또는 "keydown.myPlugin")로 구분된 하나 이상의 이벤트 유형입니다.
selector: 이벤트를 트리거한 선택기 요소의 필터 하위 항목에 대한 선택기 문자열입니다. 선택기가 null이거나 생략된 경우 선택한 요소에 도달하면 이벤트가 항상 시작됩니다.

data: 이벤트가 트리거되면 event.data가 이벤트 처리 함수에 전달되어야 합니다.

fn: 이벤트가 발생했을 때 실행되는 함수입니다. false 값은 false를 반환하는 함수의 약칭으로 사용될 수도 있습니다.

바인드() 교체

두 번째 매개변수 'selector'가 null인 경우 기본적으로 on()과bind()의 사용법에 차이가 없으므로 on()에는 단지 바인드()의 'selector' 매개변수보다 하나의 옵션이 더 있다고 생각하면 됩니다. , 따라서 on()은 쉽게 바인딩()을 대체할 수 있습니다

live() 교체

1.4 이전에는 이벤트를 현재 및 미래 요소에 바인딩할 수 있기 때문에 모든 사람들이 live()를 사용하는 것을 좋아했다고 생각합니다. 물론 1.4 이후에는 Delegate()도 비슷한 작업을 수행할 수 있습니다. live()의 원리는 매우 간단합니다. 문서를 통해 이벤트를 위임하므로 이벤트를 문서에 바인딩하여 on()을 사용하여 live()와 동일한 효과를 얻을 수도 있습니다.

라이브() 작성 방법

코드는 다음과 같습니다.

$('#list li').live('click', '#list li', function() {
//function code here.
}); 

on() 작성 방법

코드는 다음과 같습니다.

$(document).on('click', '#list li', function() {
//function code here.
});

여기서 핵심은 두 번째 매개변수 '선택기'가 적용된다는 것입니다. 이는 필터 역할을 하며 선택한 요소의 하위 요소만 이벤트를 트리거합니다.

대리자() 교체

delegate()는 조상 요소를 통해 하위 요소의 이벤트 바인딩 문제를 위임할 목적으로 1.4에서 도입되었습니다. 어느 정도 live()와 비슷한 장점이 있습니다. 단지 live()가 문서 요소를 통해 위임되고 위임은 모든 조상 노드가 될 수 있다는 것입니다. on()을 사용하여 Proxy를 구현하는 방법은 기본적으로 Delegate()와 동일합니다.

대리자() 작성 방법

코드는 다음과 같습니다.

$('#list').delegate('li', 'click', function() {
//function code here.
});

on() 작성 방법

코드는 다음과 같습니다.

$('#list').on('click', 'li', function() {
//function code here.
});

첫 번째와 두 번째 매개변수의 순서가 반대인 것 같지만 그 외 기본적으로는 동일합니다.

요약

jQuery는 두 가지 목적으로 on()을 출시했는데, 하나는 인터페이스 통합이고, 다른 하나는 성능 향상이므로, 이제부터는 바인딩(), live(), 위임을 대체하기 위해 on()을 사용합니다. 특히, live()는 이미 더 이상 사용되지 않는 목록에 있고 언제든지 종료될 것이므로 더 이상 사용하지 마십시오. 이벤트를 한 번만 바인딩한 다음 one()을 사용하면 이에 대한 변경 사항이 없습니다.

jquery on() 메서드는 동적 요소를 바인딩합니다

더 이상 쓸데없는 소리는 하지 마세요. 그냥 코드를 게시하겠습니다.

<div id="test">
<div class="evt">evt1</div>
</div>

잘못된 사용법입니다. 다음 방법은 클릭 이벤트를 evt 클래스가 있는 첫 번째 div에만 바인딩합니다. 추가를 사용하여 동적으로 생성된 div는 바인딩되지 않습니다.

<script>
// 先绑定事件再添加div
$('#test .evt').on('click', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>

올바른 사용법은 다음과 같습니다.

<script>
$('body').on('click', '#test .evt', function() {alert($(this).text())});
$('#test').append('<div class="evt">evt2</div>');
</script>