jQuery не распознает сгенерированный PHP дочерний элемент при нажатии

Question

Я работаю над сайтом, на котором мне нужно отображать кнопки в зависимости от содержимого базы данных.Нажатие на эти кнопки должно затем отправить запрос в базу данных и соответствующим образом перезагрузить содержимое страницы.

Все выполняется с помощью Ajax и jQuery путем выполнения сценариев PHP.Я могу сгенерировать кнопки, но jQuery не срабатывает при их нажатии.

Кажется, что jQuery обнаруживает щелчок по элементу div, содержащему кнопки, но не по самим кнопкам.

Мне сказали, что это может быть , потому что скрипт jQuery загружается перед обновлением страницы новым содержимым HTML.

Это контейнер div для всех кнопок выбора:

<div id = "choices">
     <!-- Choices button will be displayed here -->
</div>

Вот код PHP, создающий HTML-код для кнопок:

echo " <button class = 'choice' id = \"$id\">
        $content
      </button> ";

Этот код загружается в предыдущий раздел #choices этим кодом jQuery:

$.post("php_script/getChoices.php", 

       function(result){
        $("#choices").html(result);

       });

Довольно простой, и ожидаемый (и фактический) вывод на веб-странице:

<div id = "choices">

     <button class = 'choice' id = "1">
        Yes.
     </button>

     <button class = 'choice' id = "2">
        No.
     </button>

</div>

Но когда я пишу это:

$(".choice").click(function());

Это никогда не срабатывает, неважнокак основная функция.Однако возможно другое событие для взаимодействия с кнопками.Например, приведенный ниже код скрывает кнопки при нажатии на элемент #choices div.

$("#choices").click(function(){
      $(".choice").hide(); 
});

Чтобы понять проблему, я написал этот сценарий jQuery, который печатает содержимое элемента, по которому щелкнуликонсоль.

$("*").on('click', function(event){

    event.stopPropagation();
    console.log('Clicked: ' + $(this).html());

});

И когда я нажимаю на кнопку, она всегда возвращает весь #choices div вместо только содержимого кнопки.

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

Правильно ли мое предположение и что мне делать вЧтобы вызвать действие, когда нажата кнопка?

Answer 1

Вы всегда можете настроить таргетинг на документ для запуска динамически создаваемых элементов:

$(document).on('click', '.choice', function (e) {
    e.preventDefault(); //stop default behaviour
    var id = this.id; //get element ID
    $(this).hide(); //hide element
});

Answer 2

Как уже упоминалось, вы можете использовать делегирование событий

$(function(){
    $("#choices").on("click", "button", function(){
        alert("clicked");
    });
});

Или вручную связать обработчик событий при добавлении новых кнопок

// called each time new buttons are added
function bindOnClick(){
    $("#choices").off();
    $("#choices").on("click", "button", function(){
        alert("clicked");
    });
}

$(function(){
     // called once when dom is ready
     bindOnClick();
});

Если вы не отзоветесь, вы будете связывать событие onclick с одним и тем же элементом более одного раза.