How to call jQuery function in HTML returned by AJAX

Question

I've a page in which I've posts and users are to give comments. The comments are handled using AJAX. Each comment line has a "Vote" button.

In the index page, I've put the jQuery function for the vote

<script type="text/javascript">
$(function()    {
         $('.voteUpBtn').click(function() {
               // Cast your vote
          }
     }
</script>

Now when a user submits a new comment, it makes an AJAX call and appends the HTML using jQuery to the index page

$.ajax({
        type: "POST",
        url: "proc/add-line.php",
        data: dataString,

        cache: false,
        success: function(html){
            $("ul#nextLines").append(html);
        }
    });

On the appended HTML, I have the same vote button. (Each comment has a corresponding vote button).

The Problem is, the "vote" button on the new comment generated by AJAX doesn't work. If I refreshed the page, the vote works (although I'm using the same Markup).

How do I make it possible for the vote button to work in the AJAX returned HTML??

Emmett · Accepted Answer · 2011-03-02 14:46:17Z

5

Use live instead of click:

$('.voteUpBtn').live('click', function() {
    // Cast your vote
}

answered Mar 2, 2011 at 14:46

Emmett

14.4k12 gold badges58 silver badges82 bronze badges

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

1 Comment

ptamzz Over a year ago

what if I don't have a event.. or rather the event is on page load. I've something like $('#newline').elastic();, now I want it to be applied to all selectors in future also. How do I change the syntax??

Ken Redler · Accepted Answer · 2014-02-07 19:45:08Z

5

Update

This is an old answer. As of jQuery 1.7, use .on() to achieve the same result. The equivalent of the original answer's snippet, below, is now:

$('#ul.nextlines').on('click', '.voteUpBtn', function (e) {
  // your voting logic here
});

Original Answer

I'd recommend using .delegate() over .live(). Both will work, but it's cleaner to have one event handler on the containing object.

$('#ul.nextlines').delegate( '.voteUpBtn', 'click', function(){
  // your voting logic here
});

Unless you specify a context, .live() will essentially bind a handler to the root of the entire DOM, and therefore watch for events across the whole document. Also, with .live(), the selector runs immediately, even though the desired effect is in the future. So .live() won't perform as well as .delegate(), whose scope is constrained and whose selector (".voteUpBtn" in this case) does not run immediately. There are cases where these performance differences may be noticeable, like tables with many rows, or lists with many items.

edited Feb 7, 2014 at 19:45

answered Mar 2, 2011 at 14:51

Ken Redler

23.9k8 gold badges60 silver badges69 bronze badges

1 Comment

BMiner Over a year ago

Interesting point about delegate(). I agree... should be a bit more efficient. I'll have to start using that function. Thanks!

andyb · Accepted Answer · 2011-03-02 14:48:56Z

2

Use delegate instead of live (if you can use jQuery > 1.4) as it is more efficient.

The dynamically added elements do not pick up the jQuery bindings without live or delegate on the original binding.

answered Mar 2, 2011 at 14:48

andyb

43.9k12 gold badges126 silver badges155 bronze badges

Comments

BMiner · Accepted Answer · 2011-05-13 18:50:58Z

When you introduce new HTML code into your page (with an AJAX request, for example), the events previously setup are not automatically assigned to the newly introduced DOM elements. So, your click event for ".voteUpBtn" elements is not there yet even though your new DOM element may have its class attribute set to "voteUpBtn". You have to add this event again to the newly introduced DOM elements in the success function of your AJAX request.

Or... you can use the live() function to "attach a handler to the event for all elements which match the current selector, now and in the future." http://api.jquery.com/live/

Or... you can use the delegate() function, which is actually more like a replacement for live(). It can do almost everything live() can do, but it can be a bit more efficient.

Amitabh · Accepted Answer · 2011-03-02 14:45:03Z

1

Use jquery.live binding

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

<script type="text/javascript">
$(function()    {
         $('.voteUpBtn').live("click, "function() {
               // Cast your vote
          }
     }
</script>

answered Mar 2, 2011 at 14:45

Amitabh

61.7k43 gold badges114 silver badges160 bronze badges

Comments

Adam Hopkinson · Accepted Answer · 2011-03-02 14:45:35Z

1

You can use the live method to attach an event to all matching elements, even if they haven't been created at that point:

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

This way, when your ajax content is loaded the click event will be applied to the new .voteUpBtn automatically.

answered Mar 2, 2011 at 14:45

Adam Hopkinson

28.9k9 gold badges74 silver badges105 bronze badges

Comments

soju · Accepted Answer · 2011-03-02 14:45:57Z

1

You can use live to "Attach a handler to the event for all elements which match the current selector, now and in the future" :

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

answered Mar 2, 2011 at 14:45

soju

25.4k3 gold badges70 silver badges71 bronze badges

Comments

Scalar · Accepted Answer · 2011-03-02 14:46:40Z

1

You should use 'live' method, instead of 'click' for binding event to button.

$('.voteUpBtn').live('click',function() { // Cast your vote }

answered Mar 2, 2011 at 14:46

Scalar

2251 gold badge2 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to call jQuery function in HTML returned by AJAX

8 Answers 8

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related