I've a page in which I've posts and users are to give ments. The ments are handled using AJAX. Each ment 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 ment, 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 ment has a corresponding vote button).

The Problem is, the "vote" button on the new ment 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??

I've a page in which I've posts and users are to give ments. The ments are handled using AJAX. Each ment 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 ment, 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 ment has a corresponding vote button).

The Problem is, the "vote" button on the new ment 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??

• javascript
• jquery
• ajax

8 Answers 8

Use live instead of click:

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

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

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.

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

Use jquery.live binding

http://api.jquery./live/

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

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.

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./live/

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

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