Question

我正在一个网站上，必须在该网站上根据数据库内容显示按钮。然后，单击这些按钮应将请求发送到数据库，并适当地重新加载页面的内容。

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

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

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

这是所有选择按钮的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
});

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事件绑定到同一元素多次。

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

2 个答案: