Jquery Ajax Events With Classes

I have this code: $('.be-delete').live('click', function(e){ e.preventDefault(); var object =$(this); var url = $(this).attr('href'); $.ajax({ url : url,

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

Solution 2:

ajaxStart is a broadcast event sent to all items subscribing to it. i think your best bet is to record in a global the element that was clicked, and then in the ajaxStart handler perform your img swap using that object alone, not the element(s) receiving the start event