jQuery on() 事件未触发

Question

单击

<button id="get-info">

时的第一个事件会正常触发。

点击

<button id="add-to-db">

时的第二个事件不起作用。

这可能是一个委托问题吗？

我的代码

// index.php

<button id="get-info">

<div id="get-info-results"></div>
<div id="add-to-db-results"></div>

// custom.js

$("#get-info").on("click", function() {
    $("#get-info-results").load("/get-info-results.php", {
        // Some irrelevant _POST vars
    });
});

$("#add-to-db").on("click", function() {
    $("#add-to-db-results").load("/add-results-to-db.php", {
        // Some irrelevant _POST vars
    });
});

// get-info-results.php

<button id="add-to-db">

// add-results-to-db.php

Success

Answer 1

当您调用

$("#add-to-db").on

时，页面上没有

#add-to-db

，因此jQuery无法为其附加事件侦听器。要解决此问题，您需要在将元素添加到页面后附加事件侦听器：

$("#get-info").on("click", function() {
    $("#get-info-results").load("/get-info-results.php", {
        // Some irrelevant _POST vars
    });
}, function() {
    $("#add-to-db").on("click", function() {/* ... */});
});

或者您可以将侦听器附加到文档并指定匹配的选择器，如下所示：

$(document).on('click', '#add-to-db', function() {/* ... */});

这样，处理程序将被添加到文档中，并且仅当元素匹配选择器发出事件时才执行（即使附加侦听器时它不在页面上）。