jQuery：將事件動態綁定到dom對象

本網站和其他地方已經存在幾個相關的問題，但沒有一個答案似乎適用於我的情況。我在HTML中有一堆單選按鈕。jQuery：將事件動態綁定到dom對象

<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>

以上根本不起作用。我嘗試過.live而不是.bind，甚至不能按預期工作。事實上，它們都將動作綁定到模式中的最後一項，在上面的「b2」中。也就是說，無論我更改b1或b2按鈕中的值，都會觸發函數PK.b2（）。如果我將這些模式條目反轉，最後一個將取值。我如何成功地完成他？

來源

2009-10-03 punkish

JavaScript關閉使用父函數作用域，所以PK[mode]將始終引用最後的mode。你可以做這樣的事情，以避免它：

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

例如，見臭名昭著的循環問題更多細節部分of this article。

來源

2009-10-03 19:05:02

在代碼中的for循環中，每次爲不同模式設置變量模式。但它只會保留循環的最後一個值。所以您需要對綁定中的函數進行一些更改。

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

現在我們使用jQuery找出我們正在與合作，而不是依賴於僅具有數據從一個循環的最後一位的變量項目的名稱。

來源

2009-10-03 18:58:31 lrudor

從我看到的有兩個問題。

首先，由於lrudor pointed out，mode在閉包中是最後一種迭代模式。第二，用[name=whatever]代替[name="whatever"]。

來源

2009-10-03 19:13:14 strager

如果這是你想要做的事情，我能理解你嗎？

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(); 
      }); 
    } 
},

來源

2009-10-03 19:52:34

jQuery：將事件動態綁定到dom對象

回答

相關問題