JQuery AJAX события с классами

Question

У меня есть этот код:

$('.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' + '"/>');
});

проблема в том, что $ (this) при обратном вызове ajaxStart не работает и все ли затронуты моя HTML-разметка выглядит следующим образом:

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

как мне перехватить событие ajaxStart только для одного li?

Answer 1

Вы могли бы сделать что-то вроде этого. Это устанавливает атрибут данных для выбранного элемента. Таким образом, вы можете определить в ajaxStart, какой li действительно был нажат.

$('.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. просто как примечание. Вы должны сделать это немного по-другому. Как и в ajaxStart, вы устанавливаете innerHTML родительского div для показа счетчика. Но что вы собираетесь делать, когда запрос ajax не выполняется? Исходное содержимое li потеряно, и li все равно будет отображаться, но теперь вместо оригинального содержимого будет отображаться только счетчик.

Answer 2

ajaxStart - это широковещательное событие, которое отправляется всем подписавшимся на него элементам. я думаю, что вам лучше всего записать в глобальный элемент, по которому щелкнули, а затем в обработчике ajaxStart выполнить обмен img, используя только этот объект, а не элемент (ы), получающий событие start