Question

I have this code:

$('.be-delete').live('click', function(e){
    e.preventDefault();
    var object =$(this);
    var url = $(this).attr('href');
    $.ajax({
        url : url,
        error : function(){alert('An error has occurred, no updates were made')},
        success : function(){
            object.parent().fadeOut('slow', function(){object.parent().remove()});
        }
    });
});

$('.be-delete').ajaxStart(function(){
    $(this).parent().html('<img src="' + base_url + 'media/images/jquery/spinner.gif' + '"/>');
});

the problem is $(this) on the ajaxStart callback is not working and all li’s are affected! my html markup is as follows:

<li><img src="1.jpg"/><a class="be-delete"href="#">Delete</a></li>
<li><img src="2.jpg"/><a class="be-delete"href="#">Delete</a></li>
<li><img src="3.jpg"/><a class="be-delete"href="#">Delete</a></li>

how do I capture the ajaxStart event for only one li?

Answer 1

You could do something like this. This sets a data attribute on the clicked element. Thus you can identify in ajaxStart which li really was clicked.

$('.be-delete').live('click', function(e){
    e.preventDefault();
    var object =$(this);
    object.data("clicked", "yes");
    ...
});

$('.be-delete').ajaxStart(function(e) {
    var ele = $(e.target);
    if(ele.data("clicked")=="yes") {
        ele.removeData("clicked");
        ele.parent().html('<img src="' + base_url + 'media/images/jquery/spinner.gif' + '"/>');
    }
});

Btw. just as a note. You should do this a bit differently. As in the ajaxStart you set the innerHTML of the parent div to show the spinner. But what are you going to do when the ajax request fails? The original content of the li is lost and the li will still display but now only showing the spinner instead of the original content.