Event Delegation -- JQuery Skips Click

Question

I am adding content [buttons & tables] to my 'container' uses the load method.

However, dynamic content requires delegation and I believe my code for this is wrong and I am somehow confusing parents/children. When I load my page, my 'table' is loaded, without even clicking on 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>

Could it be perhaps because you are calling `loadUserNameTable()`? Try replacing this with `loadUserNameTable`. — JCOC611, Jan 22 '15 at 16:17
In you provided code there is neither a `#contentbox` nor a `#table` and no button with the **class** `button2` only with the **id** `button2`. — t.niese, Jan 22 '15 at 16:20
Sorry, I should have included my js functions. loadUserNameTable() is the function I want to call. — Christopher, Jan 22 '15 at 16:21
@Christopher, I think you're misunderstanding JCOC611's comment. Remove the parenthesis from the function call. — isherwood, Jan 22 '15 at 16:25
possible duplicate of [Binding an existing javascript function in JQuery](http://stackoverflow.com/questions/1384037/binding-an-existing-javascript-function-in-jquery) — Software Engineer, Jan 22 '15 at 16:27
One second -- rewritting this code, sorry been a long morning and this is a mess >. — Christopher, Jan 22 '15 at 16:28

score 0 · Accepted Answer · answered Jan 22 '15 at 16:30

Your issue is most likely due to the fact that you are executing your function before any event takes place. Change your code to:

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

This is due to the fact that you were using parenthesis () after your function, which executes it immediately (and not on an event). If you put only your function name, without the parenthesis, jQuery will take care of executing it once the event takes place.

Yes, this works. It no longer instantly loads that page. However, I think I need to work on my delegation still, the button there is still giving me problems. Thank you! — Christopher, Jan 22 '15 at 16:36

Event Delegation -- JQuery Skips Click

1 Answers1