如何让多个 html 控件使用相同的事件处理程序

Question

我有一些 javascript 并且正在动态创建一些 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 事件触发。如何更改代码以使所有控件触发相同的事件？

Answer 1

我会使用 .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>