Event delegation not working jquery

Question

So I'm just getting started with event delegation and I'm still fairly confused by it but here goes:

I have a button which adds a rating in ajax, once clicked again I'd like it to remove the rating, here's the code with annotations (and some parts removed to make it look more clear).

$(document).on("click", '.add_rating', function() {

    l.start();
    var input = $(this).prev().children('.my_rating');
    var score = input.val();
    var what_do = input.attr('action_type');
    var cur_average = $('.current_average').val();

    var data = {};
    data.score = score;
    data.media_id = <?php echo $title_data->media_id; ?>;
    data.what_do = what_do;

    $.ajax({
        dataType: "json",
        type: 'post',
        url: 'jquery/actions/add_remove_rating',
        data: data,
        success: function(data) {

            if (data.comm === 'success') {

                //do some other stuff there, irrelevant

                $('.ladda-button').removeClass('btn-primary');
                $('.ladda-button').removeClass('btn-sm');
                $('.ladda-button').addClass('btn-danger btn-xs');
                $('.ladda-label').html('Remove');
                $('.ladda-button').addClass('remove_rating');  <-- add the remove rating class I want to call if the button is clicked again
                input.attr('action_type', 'remove_rating');

                l.stop();
            }
        }
    });

    $('.remove_rating').on('click', function() {  <-- this doesn't work, why?

        alert('remove was clicked');

    });


});

I can't seem to trigger this:

    $('.remove_rating').on('click', function() {  <-- this doesn't work, why?

        alert('remove was clicked');

    });

Any help appreciated!

Edit: on a side note, I don't actually need this to work as php figures out if we're removing or adding a score based on the action_type attribute. I just wanted to find out why it's not triggering.

Answer 1

change your code to:

$(document).on("click", '.add_rating', function() {
    l.start();
    var input = $(this).prev().children('.my_rating');
    var score = input.val();
    var what_do = input.attr('action_type');
    var cur_average = $('.current_average').val();
    var data = {};
    data.score = score;
    data.media_id = <?php echo $title_data->media_id; ?>;
    data.what_do = what_do;
    $.ajax({
        dataType: "json",
        type: 'post',
        url: 'jquery/actions/add_remove_rating',
        data: data,
        success: function(data) {
            if (data.comm === 'success') {
                //do some other stuff there, irrelevant
                $('.ladda-button').removeClass('btn-primary');
                $('.ladda-button').removeClass('btn-sm');
                $('.ladda-button').addClass('btn-danger btn-xs');
                $('.ladda-label').html('Remove');
                $('.ladda-button').addClass('remove_rating');  <-- add the remove rating class I want to call if the button is clicked again
                input.attr('action_type', 'remove_rating');
                l.stop();
                $('.remove_rating').on('click', function() {  <-- this doesn't work, why?
                    alert('remove was clicked');
                });
            }
        }
    });
});

EXPLANATION:

first have a look here: Understanding Event Delegation.
event delegation is used when you need to create event handlers for elements that do not exist yet. you add a .remove_rating class to elements dynamically, however you are trying to attach a handler to elements with the above mentioned class before you even attach it.

you are attaching the class when the asynchronous ajax call returns, in the success function, however your event handler block is being processed right after you send the ajax, and not after the ajax returns (ajax is async rememeber?). therefore, you need to wait until the ajax returns and the elements are created, and only then attach the handler to them.

alternatively, using event delegation, you can attach the handler to the document, like you did in the following line:

 $(document).on("click", '.add_rating', function() {

it means, that you attach the handler to the document, and whenever any element ON the document is clicked, if that element has the class '.add_rating' then execute the handler.

therefore, you may attach another handler to the document to monitor for clicks on elements with the .remove_rating class as follows:

 $(document).on("click", '.remove_rating', function() {

this is called event delegation, because you delegate the event to a parent element.

Answer 2

Because class was added after click event initialised. You need to use live event handlers, like this:

$( document ).on('click', '.remove_rating', function() {

In this case .remove_rating click handler will work on dynamically created elements and on class name changes.