Button input click trigger jQuery event

Question

For some reason my jQuery code is not able to find the button by class.

This is what I have:

$(document).ready(function () {
            $(".deleteItem").click(function () {
                alert("Handler for .click() called.");
            });
        });

The html I have for the button:

<input type="button" value="Remove" class="deleteItem btn btn-danger btn-xs pull-right" id="testDeleteItem">

When the page is loading, the button is not recognized. The button is in hidden div and its only shown when the user is hovering over a control.

What do I need to change to make this work?

@AmmarCSE the button is dynamically loaded, yes, via c# code. but thats all done while the page elements are created on page_load, nothing async. — Laziale, Aug 17 '15 at 18:17
Does it work if you try to get button by ID? $('#testDeleteItem')... ? — Victor Levin, Aug 17 '15 at 18:21
You say button is in hidden control. Can you post code that shows/hides the button? — Victor Levin, Aug 17 '15 at 18:26
FYI @ (http://getbootstrap.com/css/#buttons) : As a best practice, we highly recommend using the — Mike Horstmann, Aug 17 '15 at 19:03
I would also strive to never pre-class an element with anything but pure bootstrap class declarations in the given order twitter's team defined in the documentation linked in previous comment. You could alternatively use your string of bootstrap classes starting with "btn....." and id the element with id="deleteItem" that would make it much cleaner, and also clarify your selector. Lastly, any bootstrap selectors are dot-notation classes when selecting ie: $("deleteItem.btn.btn-danger.btn-xs.pull-right" is the correct class based elem query in jQuery. — Mike Horstmann, Aug 17 '15 at 19:06

score 2 · Accepted Answer · edited Aug 17 '15 at 18:20

2

Use delegation for dynamically loaded content

$(document).ready(function () {
    $(document).on('click', '.deleteItem', function () {
            alert("Handler for .click() called.");
    });
});

edited Aug 17 '15 at 18:20

Popnoodles

28,090
2
45
53

answered Aug 17 '15 at 18:18

AmmarCSE

30,079
5
45
53

@Popnoodles, the OP stated the content is dynamically loaded – AmmarCSE Aug 17 '15 at 18:20
Your syntax was wrong – Popnoodles Aug 17 '15 at 18:21
@Popnoodles, oh! (facepalm), thanks for the correction – AmmarCSE Aug 17 '15 at 18:21
Thanks, this is working. – Laziale Aug 17 '15 at 18:23
1

@Laziale (I don't want to over-edit the answer) this means that `document`, which exists the jQuery is executed, listens for the click, but the behaviour is attributed to `.deleteItem` which did not exist, and therefore couldn't be told to listen for the click event, at the time the jQuery was executed. – Popnoodles Aug 17 '15 at 18:24

Button input click trigger jQuery event

1 Answers1