Динамически добавлять событие jQuery

Question

Я пытаюсь динамически добавлять кнопки и добавлять jQuery, прослушивая даже их. Тем не менее, у меня проблемы с областью видимости Javascript (по крайней мере, я так думаю).

Это в значительной степени мой код

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click(function() {
        alert("Hello from " + item);
    });
}

Теперь проблема в том, что независимо от того, какую кнопку я нажимаю, предупреждение внутри обратного вызова события всегда использует последний элемент.

Теперь я понимаю, почему это происходит (ну, примерно: P), но как я могу это исправить?

Спасибо

Answer 1

Один из способов добиться этого правильно - вот так

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    (function(item){
       $('#id' + item).click(function() {
          alert("Hello from " + item);
       });
    })(item);
}

вот jsfiddle для демонстрации http: //jsfiddle.net/reefbarman/bbP64/

Answer 2

Вы можете использовать метод $ .each jQuery для итерации по массиву группы таким же образом, но это решит проблему для вас:

    $.each(group,function(i,v){
        $('div').append("<input type='button' value='" + v + "' id = 'id" + v + "'>");
        console.log($('#id' + v))
        $('#id' + v).click(function() {
            alert("Hello from " + v);
        });
    });

http://jsfiddle.net/ebiewener/byV9X/

Answer 3

Harmen,

Почему бы вам не использовать живую функцию jquery.

Позволяет вам привязать функцию к событию на множестве объектов с помощью селектора jquery, как $ ('# button'). Click () делает, но также позволяет работать новым элементам, которые будут добавлены в будущем с событием клика. Это будет соответствовать вашим динамическим требованиям.

См. Пример ниже. Я использую функцию live, чтобы связать событие click со всеми элементами, которые являются классом 'testButton'. Затем, чтобы получить значение, используйте attr ('value') на $ (this), потому что это элемент, по которому щелкнули.

var group = ["Test 1", "Test 2", "Test 3"];

     for (var item in group) {
         $('div').append("<input class='testButton' type='button' value='" +item+ "'>");  
     }

     $('.testButton').live('click', function(e) {
           alert('Hello Im From ' + $(this).attr('value'));
      });

JQuery Live Function: http://api.jquery.com/live/

Рабочий пример: http://jsfiddle.net/bbP64/12/

Надеюсь, это поможет.

Answer 4

Большинство ответов выше верны, но излишне многословен . «это» твой друг.

for (item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click(function() {
        alert("Hello from " + this.id.slice(2) );
    });
}

Answer 5

Я думаю, что в вашем коде все в порядке, за исключением использования переменной item в операторе alert().

Поскольку оповещение запускается долго после завершения цикла for, оповещение будет видеть последнее значение элемента, а не то, которое вам нужно. Если вы просто хотите получить доступ к идентификатору элементов, по которому щелкнули в данный момент, вы можете просто получить его из ссылки this, а не передавать его. Попробуйте изменить код на:

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click(function() {
        alert("Hello from " + this.id.slice(2));
    });
}

Работает здесь в этом jsFiddle: http://jsfiddle.net/jfriend00/uyK3m/

Answer 6

Легкие пути: передать немного event data:

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click({item: item}, function(event) {
        alert("Hello from " + event.item);
    });
}

Или использовать event.target или this:

for (var item in group) {
    $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
    $('#id' + item).click(function(event) {
        alert("Hello from " + event.target.id); //or this.id
    });
}

Answer 7

Это работает для меня: http://jsfiddle.net/bgt89/, но я изменил ваш обработчик для использования замыканий.

var group = ['asdf', 'rere', 'eeeee']

$(document).ready(function() {
    for (var item in group) {
        $('div').append("<input type='button' value='" + item + "' id = 'id" + item + "'>");
        $('#id' + item).click((function(item) {
            return function() {
                alert("Hello from " + item);
            }
        })(item));
    }
});

Answer 8

Я хотел бы использовать функцию делегата jQuery.

http://api.jquery.com/delegate/

, которая присоединит обработчик событий к контейнеру.Все события элемента в контейнере поступают в контейнер и, если они обрабатываются, вызывают обработчик события.