单击时 jQuery 无法识别 PHP 生成的子元素

Question

I am working on a website on which I have to display buttons based on database content. Clicking these buttons should then send a request to the database and reload the content of the page appropriately.

Everything is done with Ajax and jQuery by executing PHP scripts. I can generate the buttons, but jQuery does not trigger when they are clicked.

It seems that jQuery detects a click on the div containing the buttons but not on the buttons themselves.

I was told that it may be because the jQuery script is loaded before the page is updated with the new HTML content.

This is the div container for all the choice buttons:

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

Here's the PHP code creating the HTML for the buttons:

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

This code is loaded in the previous #choices div by this jQuery code :

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

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

       });

Pretty basic, and the expected (and actual) output on the webpage is :

<div id = "choices">

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

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

</div>

But when I write this :

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

It never triggers, no matter how basic the function. However, having another event to interact with the buttons is possible. For example, the code below does hide the buttons when the #choices div is clicked.

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

In order to understand the problem, I wrote this jQuery script that print the content of the element that was clicked on the console.

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

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

});

And when I click on a button, it always returns the whole #choices div instead of just the content of the button.

As I said, I think this is because I am trying to interact with HTML elements that were added after the jQuery script was loaded (it is written in the section of my page).

Is my assumption correct and what should I do in order to trigger an action when the button themselves are clicked ?

Answer 1

You can always target the document to trigger dynamically created elements:

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

Answer 2

As mentioned you can use event delegation

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

Or manually bind the event handler when you add the new buttons

// 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();
});

If you don't call off you will bind the onclick event to the same element more than once.