事件委托——JQuery 跳过点击

Question

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

但是，动态内容需要委托，我认为我的代码是错误的，并且不知何故让父母/孩子感到困惑。 当我加载我的页面时，我的“表格”被加载，甚至没有点击 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 将负责执行它。