ловить вложенные нажатия кнопок

Question

У меня есть php-код на странице, которая генерирует ряд кнопок, например: (в цикле)

echo "<input type=\"button\" event='$eventID' id=\"sendsomeone\" value=\"Send a family member\"/>";
echo "<span id='$eventID'></span>";

Затем у меня есть jquery, который ловит эти клики, а также создает кнопку:

$('input:button').click(function() {
   $(this).next("span").append('You clicked this button!'); 
   $(this).next("span").append('<input type=\"button\" event=' + eventID + ' id=\"submitbutton\" value=\"Send\"/>'); 
    $('#submitbutton').click(function() {
    }
}

Моя цель - правильно отлавливать все нажатия кнопок на странице. (независимо от того, в каком порядке они нажимаются, все кнопки, сгенерированные PHP, должны вести себя одинаково, второстепенные кнопки должны вести себя по-разному)

В приведенном выше коде он сначала работает правильно, позволяя вам нажимать кнопки и создавать дополнительные кнопки для каждой из них. Но как только вы нажимаете одну из дополнительных кнопок, все начинает вести себя странно. После нажатия второй кнопки / any / click выполняет код для # submitbutton.

Нужно ли где-нибудь здесь использовать класс? Если это так, пример будет отличным. Что заставит это работать?

Answer 1

Вам не нужно добавлять кнопку и затем выбирать ее. Вы можете создать входной элемент в объекте jQuery, а затем просто связать его с событием click объекта следующим образом:

$('input:button').click(function() {
    var span = $(this).next("span");
    span.append('You clicked this button!'); 
    $('<input type=\"button\" event=' + eventID + ' value=\"Send\"/>')
    .appendTo( span )
    .click(function() {
        //do stuff here
    });
});