Apply Function To An Object Which Is Inserted By JQuery

Question

I have a function, which appends a div into a div(2). Inside div(2) I have a span. if I click this span, a function shall be executed.(click() function)

Currently I can not apply any function by onclick(), if div(2) gets inserted by jQuery. If I insert div(2) directly (hardcoded) I can execute the function.

How can I apply a function to an object which is inserted by jQuery?

Posting your code you can get a quick and better answer – morgar May 22 '11 at 20:27 — morgar, May 22 '11 at 20:27

score 1 · Accepted Answer · answered May 22 '11 at 20:28

1

Use delegate() to handle events for future elements — those which are not yet part of the DOM:

$(document).delegate(".div2 > span", "click", function () {
   // handle click event here
});

answered May 22 '11 at 20:28

Andy E

338,112
86
474
445

`.live` runs right away as well. The difference between them has to do with event bubbling – Chris Laplante May 22 '11 at 20:30
2

[`.delegate` is just more efficient](http://stackoverflow.com/questions/4204316/jquery-live-vs-delegate/4204349#4204349) – Raynos May 22 '11 at 20:32
@SimpleCoder, @Raynos: you're both right - I had them the wrong way around. – Andy E May 22 '11 at 20:33

score 0 · Answer 2 · answered May 22 '11 at 20:30

0

Ideally you want to have your jQuery code that inserts the element also attach the click handler.

So extend your function that calls

$(div).append(div2)

To also call

$(div2).find("span").click(function() {

});

answered May 22 '11 at 20:30

Raynos

166,823
56
351
396

Apply Function To An Object Which Is Inserted By JQuery

2 Answers2