jQuery에서는 향후 요소 이벤트를 바인딩하려면 바인딩, 라이브 또는 on

jQuery에서는 향후 요소 이벤트를 바인딩하려면 바인딩, 라이브 또는 on_jquery를 사용하세요.

WBOY

풀어 주다： 2016-05-16 16:51:58

원래의

1123명이 탐색했습니다.

향후 요소 바인딩 이벤트에는 바인딩을 사용할 수 없습니다.

1. 대신 라이브를 사용할 수 있지만 공식 문서에 따르면 1.7부터는 라이브 및 위임을 권장하지 않습니다. 1.9 라이브에서는 제거됩니다.

2. 대신 on을 사용하는 것이 좋습니다(참고: 버전 1.7 이상에서만 지원됨). 사용법: on(events,[selector],[data],fn)

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

 
//$(function(){})
$(document).on("click", "#testDiv", function(){ 
에 배치된 경우에만 유효합니다. //여기서 $(this)는 $(document)가 아닌 $( "#testDiv")를 나타냅니다. 
}) 

3. 일치하는 요소(예: click ) 일회성 이벤트 처리 함수를 바인딩할 때 on 대신 .one()을 사용하면 됩니다. 모든 [selectors]에서 한 번만 실행되는 것이 아니라 이러한 [selects]에서도 한 번만 실행됩니다. 미래 요소에 유효합니다.

4. 이벤트에 바인딩해야 하는 div에 추가, 삭제, 수정 버튼이 3개 있는 경우 다음과 같이 작성합니다.

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

 
$('#btn-add').click(function(){}) 
$( '#btn-del').click (function(){}); 
$('#btn-edit').click(function(){}) 

단점 이렇게 쓰면 세 가지 구조적 연결 사이의 차이를 볼 수 없으며 이벤트가 터질 이유가 없습니다.

jQuery 이벤트 바인딩에 대한 CoffeeDeveloper의 권장 사항을 살펴보겠습니다.

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

 
$("#btnContainer").coffee({ 
클릭: { 
"#btn-add": function(){ //뭔가를 하세요 }, 
"#btn-del": function(){ //뭔가를 하세요 }, 
"#btn-edit": function(){ //뭔가를 하세요 } 
} , 
 mouseenter:{ 
"#btn-abc": function(){ //do Something }, 
} 
}) 

이렇게 작성하면, 훨씬 나아 보이지 않나요?(.coffee()는 사용자 정의 함수입니다. 이 함수를 직접 작성할 수 있나요?) 하지만 바인딩된 함수가 상대적으로 길면 코드가 여전히 좀 지저분하게 느껴집니다.

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

$('#btnContainer') 
.on ('클릭','# btn-add', function(){}) 
.on('click','#btn-del', function(){}) 
.on('클릭' ,'#btn-edit' ,function(){}); 

 

이러한 작성 방법은 위에서 언급한 두 가지 단점도 피하고 덜 지저분해 보입니다.