Question

我有一些javascript，我正在创建一些HTML。我想要做的是为每个控件添加一个事件处理程序（它们都是“输入”控件），这样如果我点击它们中的任何一个，它们都会触发相同的事件。我首先在代码的initialize部分中定义一个委托，如下所示：

 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>

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

1 个答案: