Question

I have the following code:

var $reviewButton = $('span.review_button');

$reviewButton
    .live('click',
        function(){

            $('#add_reviews').show(); 

        }
    )

Later in the script, I use an AJAX call to load some content and another instance of $(‘span.review_button’) enters the picture. I updated my code above to use ‘.live’ because the click event was not working with the AJAX generated review button.

This code works, as the .live(click //) event works on both the static ‘span.review_button’ and the AJAX generated ‘span.review_button’

I see however that .live is depracated so I have tried to follow the jquery documentations instructions by switching to ‘.on’ but when I switch to the code below, I have the same problem I had before switching to ‘.live’ in which the click function works with the original instance of ‘span.review_button’ but not on the AJAX generated instance:

var $reviewButton = $('span.review_button');

$reviewButton
    .on('click',
        function(){

            $('#add_reviews').show(); 

        }
    )

Suggestions?

Answer 1

The correct syntax for event delegation is:

$("body").on("click", "span.review_button", function() {
    $("#add_reviews").show(); 
});

Here instead of body you may use any static parent element of "span.review_button".

Attention! As discussed in the comments, you should use string value as a second argument of on() method in delegated events approach, but not a jQuery object.