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
– Paul Tomblin, Commented Jul 27, 2012 at 14:02
maybe if we look how it's your html markup and the entirely function we can help you — Jorge
– Jorge, Commented Jul 27, 2012 at 14:02

Shyju · Accepted Answer · 2012-07-27 14:02:50Z

7

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)

answered Jul 27, 2012 at 14:02

Shyju

220k106 gold badges420 silver badges499 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anthony Grist Over a year ago

Older versions should use .delegate(), not .live(). I'd update your answer to suggest using that instead.

rogal111 · Accepted Answer · 2012-07-27 14:08:58Z

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, 2012 at 14:08

answered Jul 27, 2012 at 14:02

rogal111

5,9232 gold badges30 silver badges33 bronze badges

6 Comments

Ohgodwhy Over a year ago

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?

Richard de Wit Over a year ago

Use delegate instead: stackoverflow.com/questions/4579117/jquery-live-vs-delegate

Anthony Grist Over a year ago

@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.

Snow Blind Over a year ago

@GeenHenk Yup, +1 for delegate since live is deprecated.

Ohgodwhy Over a year ago

@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.

|

Collectives™ on Stack Overflow

How to use ajax within another ajax in jquery?

2 Answers 2

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related