我有一些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事件。如何更改代码以便所有控件都能触发相同的事件?
答案 0 :(得分:0)
我会使用.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>