Question

我正在添加内容[按钮＆amp; table]到我的'container'使用了load方法。

然而，动态内容需要委派，我相信我的代码是错误的，我在某种程度上让父母/孩子感到困惑。当我加载页面时，我的“表格”被加载，甚至没有点击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跳过Click

1 个答案: