JQuery 루프의 이벤트 바인딩 문제에 대한 자세한 설명

N개의 DOM이 필요한 페이지가 있습니다. jQueryevents를 DOM에 수동으로 바인딩해야 한다면 작업량이 엄청나고 코드의 양도 늘어나서 매우 지저분해 보일 것입니다. 작업량과 jQuery 코드의 양을 줄이기 위한 jQueryLoop바인딩 이벤트를 살펴보겠습니다.

N개의 DOM이 필요한 페이지가 있습니다. 각 DOM의 요소 ID는 숫자로 끝나야 합니다. 예:

<input type="text" name="username" id="username_1" value="" />
<input type="text" name="username" id="username_2" value="" />
<input type="text" name="username" id="username_3" value="" />

이제 페이지가 로드될 때 각 요소에 하나를 추가해야 합니다. Onclick 이벤트를

$(function(){
 for(var i=1; i<=3; i++){
  $(&#39;#username_&#39;+i).onclick(function(){
   alert(i);
  });
 }
});

라고 쓴다고 생각하기 쉽습니다. 이것은 잘못된 것입니다. . .

그런 다음 다음과 같이 변경합니다.

$(function(){
 for (var i=1; i<=3; i++){
  $("#username_"+i).bind("click", {index: i}, clickHandler);
 }

 function clickHandler(event) {
  var i= event.data.index;
  alert(i);
 }
});

위는 루프에서 이벤트를 바인딩하는 JQuery의 문제에 대한 자세한 설명입니다. 자세한 내용은 이 사이트

를 검색해 보세요.

관련 권장 사항:

jquery 루프 맵 기반 코드 function_jquery

JQuery 루프 스크롤 그림 code_jquery

jQuery 루프 스크롤 뉴스 목록 샘플 code_jquery

위 내용은 JQuery 루프의 이벤트 바인딩 문제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!