$(this) not triggering in ajax success even after assigning value to DOM outside of ajax call

Question

I am assigning this to a var element

var element = this;

Before the AJAX call this works fine and is called properly

$(element).parent('.refreshstats').html('<i class="fa fa-refresh refresh-stats fa-spin" id="'+id+'" url="'+url+'"></i>');

If I try and call it again in the success callback it does not trigger

$(element).parent('.refreshstats').html('<i class="fa fa-refresh refresh-stats" id="'+id+'" url="'+url+'"></i>');

JQUERY

$(document).on('click', '.refresh-stats', function() {
    var id = $(this).attr('id');
    var url = $(this).attr('url');
    var element = this;
    $(element).parent('.refreshstats').html('<i class="fa fa-refresh refresh-stats fa-spin" id="'+id+'" url="'+url+'"></i>');
    $.ajax({
        type: "POST",
        url: "refresh-stats.php",
        data:({id: id, url: url}),
        success: function(data) {
            $(element).parent('.refreshstats').html('<i class="fa fa-refresh refresh-stats" id="'+id+'" url="'+url+'"></i>');
            var result = $.parseJSON(data);
            if (result[0] == 'No') {
                $('.indexed[data-pk="'+id+'"]').html('<span class="label label-danger">No</span>')
            }
            if (result[0] == 'Yes') {
                $('.indexed[data-pk="'+id+'"]').html('<span class="label label-success">Yes</span>')
            }
            if (result[1] == 'No') {
                $('.dindexed[data-pk="'+id+'"]').html('<span class="label label-danger">No</span>')
            }
            if (result[1] == 'Yes') {
                $('.dindexed[data-pk="'+id+'"]').html('<span class="label label-success">Yes</span>')
            }
            if (result[2] == 'No') {
                $('.removed[data-pk="'+id+'"]').html('<span class="label label-danger">No</span>')
            }
            if (result[2] == 'Yes') {
                $('.removed[data-pk="'+id+'"]').html('<span class="label label-success">Yes</span>')
            }
        }
    });
});

not sure what you mean, I am calling it again in success as you can see in my code — Cesar Bielich, May 15 '15 at 08:25
Yes success is fired, if I do an `alert("test");` in success I get the alert — Cesar Bielich, May 15 '15 at 08:25
The click event is written on `'.refresh-stats'` and the `parent()` also has `'.refresh-stats'`. Is this correct? Does the clicked element and its parent have same classes? — Shaunak D, May 15 '15 at 08:26
Provide relevant HTML markup in question itself. @ShaunakD Not same class: `'.refresh-stats'` vs `'.refreshstats'` but could be a typo i guess — A. Wolff, May 15 '15 at 08:27
you missed the `-` between the two classes one is `refreshstats` and the other is `refresh-stats`. I meant it that way. Remember the first one fires fine so I know its working, its the second one that does not — Cesar Bielich, May 15 '15 at 08:28
Could you try `console.log($(element))` in `success:` and see what do you get? — Shaunak D, May 15 '15 at 08:29

mplungjan · Accepted Answer · 2015-05-15T08:44:49.667

This is an XY-problem.

You likely want to just change class - also you MUST use the correct class name - I used .refresh-stats since you got an error on .refreshstats.

$(document).on('click', '.refresh-stats', function() {
    var id = this.id;
    var url = $(this).attr('url');
    var $element = $(this); // store the jQuery object
    $(this).addClass("fa-spin"); // set the spinner
    $.ajax({
        type: "POST",
        url: "refresh-stats.php",
        data:({id: id, url: url}),
        success: function(data) {
            $element.removeClass("fa-spin"); // remove the spinner

Also I recommend to change the document in

$(document).on('click', '.refresh-stats', function() {

to the selector of a static parent element since it is more effecient

charlietfl · Answer 2 · 2015-05-15T08:53:48.230

Before you make the request you are replacing the html of element.parent()

At that point element no longer exists in the DOM

Suggest you store reference to the parent instead since it is not being removed

$(document).on('click', '.refresh-stats', function() {
    var id = $(this).attr('id');
    var url = $(this).attr('url');
    var $parent = $( this).parent('.refreshstats');// don't really need class for `parent()`
    $parent.html('......');
    $.ajax({
        type: "POST",
        url: "refresh-stats.php",
        data:({id: id, url: url}),
        success: function(data) {
            $parent.html(......

You need to make sure it is refresh-stats or refreshstats – mplungjan May 15 '15 at 08:41 — mplungjan, May 15 '15 at 08:41

$(this) not triggering in ajax success even after assigning value to DOM outside of ajax call

2 Answers2