CODEWITHSUNDEEP
jquerybutton
Mark
Mark

Reputation: 422

how to capture the mouse click for a button which is created by jquery?

I hava two divs. there is a button in div A and nothing in div B. a new button would be created in div B while I click button in div A. that is:

1) I click the button in div A;

2) the click would trigger a ajax message(jquery), and the message would be send to the background services(written by django);

3) the background services would return a html fragment, which is the new button in div B;

4) the new button would display in div B:

$("#B").empty();
$("#B").html(response);

the response is the html fragment(the html fragment includes the new button whose id is "bt_2").

5) I click the new button in div B;

6) I could not capture this click by using jquery:

$("#bt_2").click(function(tmp_event) {
    alert("get it!");
});

these js scripts are all in the same file(name is hp.js), and the js file is loaded successfully before I click the button in div A.

what should I do if I want to capture the click of the new button? any help would be appriaciate!

Upvotes: 1

Views: 72

Answers (2)

Robin Leboeuf
Robin Leboeuf

Reputation: 2116

You can use .on() like this:

$("#B").on('click','#bt_2',function(tmp_event) {
    alert("get it!");
});

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337580

Because the #bt_2 element is not present on load of the DOM, you need to use a delegated event handler. Try this:

$('#B').on('click', '#bt_2', function(tmp_event) {
    alert("get it!");
});

I assume the ids you've given in your examples are just placeholders? If not, you should make them much more descriptive of the elements.

Upvotes: 1

Related Questions