jquery not working after ajax call?

Question

First post here. Recently I have been spending a lot of time learning JavaScript. I've been using the jQuery library and I just now learned that ajax calls will NOT work on portions of the page which are dynamically loaded (without refreshing). Naturally, I need ajax functionality for these posts as well. I need help understanding the best way to work around this annoyance.

Yes, I have read and saw what was said in the jQuery FAQ, but to me it was vague and non-informative, but did provide some basic information: http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_stop_working_after_an_AJAX_request.3F

Specifically, I am making a user-profile page, similar in concept to a facebook profile page. Users post comments to other users, and new comments are automatically loaded onto the page using jQuery's ajax functionality. Each comment has buttons such as "Delete", "Like", "Reply", etc which work great with ajax, but they do not work at all for comments that are automatically loaded onto the page...

I found out about the delegate() method, which I understand is how some people get past this. So far all that I have in my code is this:

$(document).delegate('img', 'click', function(){
alert('test'); //Stub
});

This works, but THE PROBLEM IS I already have jQuery methods which I wrote to handle every single one of my ajax calls. I can't figure out how to use delegate to call the jQuery code blocks that I already wrote. Is it possible? For example, this loads a comment box underneath the comment of which the user clicked the "Reply" button:

$('img.wallpost_reply').click(function(){
$(this).closest('div.wallpost').find('div.wallreply').slideDown('fast'); //Toggle the window 
$(this).closest('div.wallpost').find('textarea.wallpost_input').focus(); //Focus on the textarea
});

^^This is very simple block of code works perfectly, similar to many other small blocks of code which I have. This one gets called when the user clicks on the "Reply" image, like this:

<img class="wallpost_reply" style="cursor:pointer;" src="./images/reply.png" alt="Reply" />

How can I assign delegate() to link up with the jQuery code that I already wrote??? Is this even possible? I would rather not write completely new functions which have the same functionality, if possible.

Cole Tobin · Accepted Answer · 2013-08-13 01:37:44Z

5

For any elements which will get binding to the DOM through ajax or added at run time, you have to use

http://api.jquery.com/live/

or delegates which you are using.

http://api.jquery.com/delegate/

Those will be binded at the document level.

edited Aug 13, 2013 at 1:37

Cole Tobin

9,44815 gold badges52 silver badges77 bronze badges

answered Apr 24, 2011 at 16:41

kobe

15.9k15 gold badges67 silver badges93 bronze badges

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

4 Comments

skcin7 Over a year ago

See I just started learning JavaScript a few days ago and jQuery today... I don't know what any of that means. Can I use the live() method to execute the same jQuery code block as I was before?

kobe Over a year ago

@user , yes you can use .live so that it will work for both normal bindings and future added html elements.

skcin7 Over a year ago

I do not know how to bind it, though. LOL. That's what I was asking. How would you bind them together?

skcin7 Over a year ago

Hey there. I was able to figure it out using the live function as you sugged. Many thanks!

Steven McElveen · Accepted Answer · 2013-08-12 21:24:14Z

0

Here's an example of a regular function and a "live" function. The live function will still work on HTML you insert with an AJAX call. Incidentally, the code allows only digits in an input box.

Regular:

$('input[class="number"]').keyup(function(e)
{
if (/[^0-9\.]/g.test(this.value))
{
    // Filter non-digits from input value.
    this.value = this.value.replace(/[^0-9\.]/g, '');
}
});

Live:

$('input[class="number"]').live('keyup', function (e) {
   if (/[^0-9\.]/g.test(this.value))
{
    // Filter non-digits from input value.
    this.value = this.value.replace(/[^0-9\.]/g, '');
}
});

answered Aug 12, 2013 at 21:24

Steven McElveen

4595 silver badges8 bronze badges

Collectives™ on Stack Overflow

jquery not working after ajax call?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related