How to use ajax within another ajax in jquery?

Question

I made a jquery code like :

$('button').click(function(event) {

});

In it; I put $.post and sent data to a php file and return table rows. In every rows, there is an 'add' button.

Then I made another jquery code for these buttons like :

$('.row_button').click(function(event) {

});

Again, I put $.post and tried to send data about that row and wanted to fetch information via ajax request. But it didn't work. Nothing happend. I looked code and there is no error.

Isn't it possible to use ajax within another ajax? Or is there another way? Thank you.

There is no such thing as "ajax within another ajax". When you're in the success callback of the first .ajax call, you're not in the first .ajax any more. The "a" in "ajax" stands for "asynchronous". — Paul Tomblin, Jul 27 '12 at 14:02
maybe if we look how it's your html markup and the entirely function we can help you — Jorge, Jul 27 '12 at 14:02

score 7 · Accepted Answer · answered Jul 27 '12 at 14:02

That is because those newly injected elements don't know about the click event binding you already have.

Solution : use jquery on function.

Change

$('.row_button').click(function(event) {

});

to

$(document).on("click",".row_button'",function(event) {

});

jQuery on works for current and future elements (newly injected elements via ajax/dynamically adding new elements using javascript) . It is available from jQuery 1.7+ version. If you are using an earlier version of jQuery, consider using jquery live (As of jQuery 1.7, the .live() method is deprecated)

Older versions should use `.delegate()`, not `.live()`. I'd update your answer to suggest using that instead. — Anthony Grist, Jul 27 '12 at 14:08

rogal111 · Answer 2 · 2012-07-27T14:08:58.340

3

Try to use this instead second code:

$('.row_button').live('click',function(event) {
  ...
});

Jquery .live attach an event handler for all elements which match the current selector, now and in the future.

Edit

.live is now deprected so use .on insted:

$(document).on("click",".row_button'",function(event) {

});

From Jquery documentation:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

edited Jul 27 '12 at 14:08

answered Jul 27 '12 at 14:02

rogal111

5,874
2
27
33

The live functionality here does not delegate the event to a static container. The 'row-button' is propagated within the ajax call. What do you think using 'live' here is achieving? – Ohgodwhy Jul 27 '12 at 14:03
1

Use `delegate` instead: http://stackoverflow.com/questions/4579117/jquery-live-vs-delegate – Richard de Wit Jul 27 '12 at 14:03
@Ohgodwhy `.live()` **does** delegate events, which is what they want. It's the same as doing `$(document).on('click', '.row_button', function() {...});` or `$(document).delegate('.row_button', 'click', function() {...}):`, but also happens to be deprecated. – Anthony Grist Jul 27 '12 at 14:05
@GeenHenk Yup, +1 for `delegate` since `live` is deprecated. – Snow Blind Jul 27 '12 at 14:06
@Anthony Grist the point I was making that using `live` in that scenario is doing nothing. You're not using `live` to delegate the click handler to a static container. Without doing such, it's effectively useless. SOrry you were confused. – Ohgodwhy Jul 27 '12 at 14:10
@Ohgodwhy You're the one who seems to be confused. `.live()` **doesn't** reference a static container, it takes a single selector for the dynamic elements you wish to match and **always** wires up the event delegation to the `document`. It doesn't have a "non-delegated" syntax. Aside from the function being deprecated, this answer is entirely correct. – Anthony Grist Jul 27 '12 at 14:53

How to use ajax within another ajax in jquery?

2 Answers2