如何獲得多個HTML控件使用相同的事件處理程序

我有一些JavaScript，並在飛行中創建一些HTML。我想要做的是爲每個控件添加一個事件處理程序（它們都是「輸入」控件），這樣如果我點擊它們中的任何一個，它們都會觸發相同的事件。我第一次在代碼中像這樣的初始化部分定義了一個代理：如何獲得多個HTML控件使用相同的事件處理程序

this.rule_event_handler = Function.createDelegate(this, this.rule_selected);

我已經表明低於一個功能我想點擊時的所有控件調用：

rule_selected: function() {}

我添加了處理程序如下圖所示：

display_rules: function() { 
    var rulearea = $('#ruleControlArea')[0]; 
    rulearea.innerHTML = ""; 
    for (intI = 0; intI < this.arrRules.length; intI++) { 
     rulearea.innerHTML += this.create_rule_control(intI, this.arrRules[intI].display); 
     $addHandlers($('#rule_' + intI)[0], { 'click': this.rule_event_handler }, this, true); 
    } 
},

的問題，然後我看到的是，只有最後控制導致onclick事件觸發。我如何更改代碼以便所有控件都能觸發相同的事件？

來源

2010-09-14 Retrocoder

我會用.live方法

rule_selected: function() {}

類selectable添加到您的規則和創建/刪除您的規則項目

$(".selectable").live("click", rule-selected);

之前加入現場活動。如果你真的想使用你的規則的ID，我會研究你的ID使用情況;它看起來像你在頁面上多次使用相同的id（你使用id查詢作爲一個數組，我覺得奇怪，任何具體原因？），這可能會導致怪異的行爲。

編輯

這裏是一個樣本

<div id="RulesControlArea"> 
</div> 

<div id="AddRule">Add Rule</div> 
<div id="DisplayRules">Display Rules</div> 

<script type="text/javascript"> 

    function display_rules() { 
     var rulearea = $('#RulesControlArea'); 
     rulearea.empty(); 
     for (intI = 0; intI < 10; intI++) { 
      rulearea.append("<div id='" + Math.random() + "." + intI + "' class='selectable'>this is a rule from display_rules</div>"); 
     } 
    } 

    $("#RulesControlArea .selectable").live('click', function(element) { alert(element.target.innerHTML); }); 
    $("#AddRule").click(function() { $("#RulesControlArea").append("<div id='" + Math.random() + "' class='selectable'>this is a rule</div>"); }); 
    $("#DisplayRules").click(display_rules); 
</script>

來源

2010-09-14 08:46:50 samy

可能要遵循這個答案給我的建議，並通過在一個jQuery啓動功能HTTP包裹整個呼叫使用模塊模式： //stackoverflow.com/questions/3709950/how-to-use-javascript-namespaces-correctly-in-a-view-partialview – samy 2010-09-17 13:18:59

如何獲得多個HTML控件使用相同的事件處理程序

回答

相關問題