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

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

Ajax和jQuery通过执行PHP脚本完成所有工作。 我可以生成按钮，但单击jQuery时不会触发它们

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

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

这是所有选项按钮的div容器：

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

echo”
$content
";

此代码由以下jQuery代码加载到前面的#choices div中：

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

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

       });

非常基本，网页上的预期（和实际）输出为：

对
不

但当我写这篇文章时：

$(".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元素交互（它写在我的页面部分）

---

我的假设正确吗？单击按钮时，我应该怎么做才能触发操作？

如上所述，您可以使用事件委派

$(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

事件绑定到同一元素。

您可以始终将文档作为目标，以触发动态创建的元素：

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

---

在（'click'，'button'，handler'）上使用委托

$（'#choices'）

非常适合检测点击。选择。虽然要获取id，正确的语法是

varid=$（this）.attr（“id”）

。没错，我将其更新为工作版本。您的语法也可以使用。