事件委派 -- JQuery 跳过点击

Question

我正在向我的 'container' 添加内容 [按钮和表格] 使用加载方法。

但是，动态内容需要委托，我认为我的代码是错误的，我有点困惑 parents/children。当我加载我的页面时，我的 'table' 被加载，甚至没有点击 button1。

        $(document).ready(function () {
        $("#button1").click(loadUserNameTable);
        $("#contentbox").on("click", '#table .button2', loadQuestions);

    });


function loadUserNameTable() {
        $("#contentholder").load("nametable.html");
    }
    function loadQuestions() {
        $("#contentholder").load("questions.html");
    }
    function loadPasswordChanger() {
        $("#contentholder").load("passwordchange.html");
    }
    </script>

<div id="contentholder">
<button type = "button" id="button1">Begin Password Reset</button>
</div>



 //nametable.html
<div class="table">
<table id="table1" style="margin:0 auto">
<tr>
<td>
    Enter Username: 
</td>
<td>
<input type="text" id="userName" value="" />
</td>
</tr>
<tr>  
<td>

</td>
<td>
<button id="button2" style="float: left"> Submit </button>
</td>
</tr>
</table>
</div>


//questions.html

<div class="qs" id="questions" style="margin: 0 auto">
<table style="margin: 0 auto">
    <tr>
        <td>Question 1: </td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td>Question 2: </td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        <button id="button2" style="float: left"> Submit </button>
        </td>
    </tr>
   </table>
 </div>

Answer 1

您的问题很可能是因为您在任何事件发生之前就执行了函数。将您的代码更改为：

$(document).ready(function () {
    $("#button1").click(loadUserNameTable);
    $("#contentbox").on("click", '#table .button2', loadUserNameTable);
});

这是因为您在函数后使用了括号 ()，立即执行（而不是在事件发生时）。如果你只输入你的函数名，没有括号，jQuery 将在事件发生后负责执行它。

事件委派 -- JQuery 跳过点击

Event Delegation -- JQuery Skips Click

jquery

event-delegation