Делегирование события JQuery пропускает Click

Я добавляю содержимое [кнопки и таблицы] в свой «контейнер», используя метод загрузки.

Однако динамический контент требует делегирования, и я считаю, что мой код для этого неверен, и я как-то сбиваю с толку родителей/детей. Когда я загружаю свою страницу, моя «таблица» загружается, даже не нажимая кнопку 1.

        $(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>

jquery event-delegation
person Christopher    schedule 22.01.2015    source источник
comment
Может быть, это потому, что вы звоните loadUserNameTable()? Попробуйте заменить это на loadUserNameTable.   -  person JCOC611    schedule 22.01.2015
comment
Кроме того, ваша разметка для элемента <button> недействительна. Это не элемент void. Должно быть <button>InnerText</button>.   -  person Terry    schedule 22.01.2015
comment
В предоставленном вами коде нет ни #contentbox, ни #table, ни кнопки с классом button2, только с id button2.   -  person t.niese    schedule 22.01.2015
comment
Извините, я должен был включить свои js-функции. loadUserNameTable() — это функция, которую я хочу вызвать.   -  person Christopher    schedule 22.01.2015
comment
@ Кристофер, я думаю, ты неправильно понял комментарий JCOC611. Удалите скобки из вызова функции.   -  person isherwood    schedule 22.01.2015
comment
возможный дубликат Привязка существующей функции javascript в JQuery   -  person Software Engineer    schedule 22.01.2015
comment
Одна секунда -- переписываю этот код, извините, что утро было долгим, и это беспорядок ›.‹   -  person Christopher    schedule 22.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

Ваша проблема скорее всего связана с тем, что вы выполняете свою функцию до того, как произойдет какое-либо событие. Измените свой код на:

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

Это связано с тем, что вы использовали скобки () после своей функции, которая выполняет ее немедленно (а не по событию). Если вы укажете только имя своей функции без круглых скобок, jQuery позаботится о ее выполнении после того, как произойдет событие.

person JCOC611    schedule 22.01.2015
comment
Да, это работает. Он больше не загружает эту страницу мгновенно. Тем не менее, я думаю, что мне нужно еще поработать над делегированием, кнопка все еще вызывает у меня проблемы. Благодарю вас! - person Christopher; 22.01.2015