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

Question

我正在开发一个网站，我必须在该网站上显示基于数据库内容的按钮。单击这些按钮应该向数据库发送请求并适本地重新加载页面内容。

一切都是通过执行 PHP 脚本使用 Ajax 和 jQuery 完成的。 我可以生成按钮，但单击按钮时 jQuery 不会触发。

似乎 jQuery 检测到对包含按钮的 div 的点击，但没有检测到对按钮本身的点击。

我被告知这可能是因为 jQuery 脚本是在页面更新为新的 HTML 内容之前加载的。

这是所有选择按钮的 div 容器:

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

以下是为按钮创建 HTML 的 PHP 代码:

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

此代码通过以下 jQuery 代码加载到前面的 #choices div 中:

$.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，而不仅仅是按钮的内容。

正如我所说，我认为这是因为我试图与加载 jQuery 脚本后添加的 HTML 元素进行交互(它写在我的页面部分中)。

我的假设正确吗？我应该做什么才能在单击按钮本身时触发操作？

Answer 1

您始终可以定位文档来触发动态创建的元素:

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