Как получить несколько HTML-элементов управления, чтобы использовать один и тот же обработчик событий - PullRequest
Новая
       6

Как получить несколько HTML-элементов управления, чтобы использовать один и тот же обработчик событий

0 голосов
/ 14 сентября 2010

У меня есть немного 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.Как я могу изменить код, чтобы все элементы управления запускали одно и то же событие?

1 Ответ

0 голосов
/ 14 сентября 2010

Я бы использовал метод .live 

rule_selected: function () {}

, добавил бы класс selectable к вашим правилам и добавил бы прямое событие перед созданием / удалением элементов ваших правил 

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

Если вы действительно хотите использовать идентификатор ваших правил, я бы посмотрел на ваше использование идентификаторов;похоже, что вы используете один и тот же идентификатор много раз на странице (вы используете запрос идентификатора как массив, который я нахожу странным; какая-то конкретная причина для этого?), и это может вызвать странное поведение.

РЕДАКТИРОВАТЬ

вот образец 

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