jQuery : dom 객체에 동적으로 이벤트 바인딩

Question

몇 가지 관련 질문이 이미이 사이트와 다른 곳에 있지만 어떤 답도 내 상황에 적용되지 않는 것으로 보입니다. HTML에 여러 개의 라디오 버튼이 있습니다.

<input type="radio" name="b1" value="aa"> aa<br> 
<input type="radio" name="b1" value="ab"> ab<br> 
<input type="radio" name="b1" value="ac"> ac<br> 

<input type="radio" name="b2" value="ba"> ba<br> 
<input type="radio" name="b2" value="bb"> bb<br> 
<input type="radio" name="b2" value="bc"> bc<br> 

<script type="text/javascript"> 
var PK = {  
    modes: ["b1", "b2"], 

    init: function() {   
     // attach actions to radio buttons 
     for (var key in this.modes) { 
      var mode = this.modes[key]; 
      $("input[name='" + mode + "']").bind(
       "change", 
       function() { 
       PK[mode]($("input[name='" + mode + "']:checked").val()); 
       } 
     ); 
     } 
    }, 

    b1: function(val) { .. do something .. }, 

    b2: function(val) { .. do something else .. }, 
}; 

$(document).ready(function() { 
    PK.init(); 
}); 
</script> 

위의 기능이 전혀 작동하지 않습니다. .bind 대신 .live를 시도했는데 예상대로 작동하지 않습니다. 사실, 위의 두 가지 모드는 모드의 마지막 항목 인 "b2"에 작업을 바인딩합니다. 즉, b1 또는 b2 버튼의 값을 변경하더라도 함수 PK.b2()가 실행됩니다. 모드 엔트리를 뒤집 으면 마지막 엔트리가 값을 취합니다. 어떻게해야 성공할 수 있습니까?

Answer 1

JavaScript 클로저는 부모 함수 범위를 사용하므로 PK[mode]은 항상 마지막으로 mode을 참조합니다. 이 같은 그것을 방지하기 위해 수행 할 수

는

$("input[name=" + mode + "]").bind(
    "change", 
    function(mode) { 
     return function() { 
      PK[mode]($("input[name='" + mode + "']:checked").val()); 
     }; 
    }(mode) 
); 

는 예제 악명 높은 루프 문제 자세한 내용은 섹션 of this article를 참조하십시오.

Answer 2

코드의 for 루프에서 가변 모드가 다른 모드에 대해 매번 설정됩니다. 그러나 루프의 마지막 값만 유지합니다. 대신 바인드 내부의 함수를 약간 변경해야합니다.

$("input[name=" + mode + "]").bind(
    "change", 
    function(e) { 
     PK[$(this).attr('name')]($(this).val()); 
    } 
); 

이제 우리는 우리가 아니라 단지 루프에서 데이터의 마지막 비트가있는 변수에 의존하지 않고, 작업중인 항목의 이름을 알아 내기 위해 jQuery를 사용하고 있습니다.

Answer 3

내가보기에 두 가지 문제점이 있습니다.

먼저, lrudor pointed out으로 닫는 중 mode이 마지막 모드 반복입니다.

두 번째로 [name="whatever"] 대신 [name=whatever]을 사용하십시오.

Answer 4

내가 원한다면 올바르게 이해하고 있습니까?

init: function() { 
    // attach actions to radio buttons 
    for (var key in this.modes) { 
     var mode = this.modes[key]; 
     $("input[name='" + mode + "']") 
      .bind("change", function(e) { 
       var radio = e.srcElement; 
       PK[radio.name](radio.value); 
      }) 
      .bind("click", function() { 
       // Loose focus of the radio button once clicked, 
       // so the change-event fires 
       this.blur(); 
      }); 
    } 
},