Почему событие jQuery ajax click запускается несколько раз?

Question

Я попытался отменить привязку события click, но иногда оно срабатывает дважды, иногда 5 раз !!Немного надоело!

Код от modal.asp

$("input[name=add_associate]").live("click",function(){
    var addassociateID = $(this).attr("id")

    $.ajax({
       type: 'POST',
       url: '/data/watchlist_save.asp',
       data: {m : 'share_watchlist_add', watchListID : <%=WatchListID%>, a : addassociateID},
       async:true,
       success: function(data) {
           $(".associate_users").load("/data/sub_watch_members.asp?watchListID=<%=WatchListID%>",
           {cache:false},function() {
               $(".search_note").html(data)         
               $(this).unbind('click').bind('click',handler);                                                                                                
           })
       },
       error: function(data){
           $(".search_note").html(data)
       }
    });     
})

ОБНОВЛЕНИЕ :В основном я вызываю следующий код в .associate_users

<div id="associate_list">
    <div class="associate_record">
        <div class="left" style="padding:8px;"><img src="../imgs/nopic-m.png" style="width:30px;height:30px;" class="img_border" /></div>
        <div class="left" style="padding-top:15px;">5)Neil Burton</div>
        <div class="right" style="padding-top:10px;margin-right:5px;"><input type="button" class="btn-blue" name="add_associate" id="890" value="Add"></div>
        <div style="clear:both;"></div>
    </div>
    <div style="clear:both;"></div>
</div>

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ :Это происходит только тогда, когда я запускаю событие, закрываю модальное диалоговое окно, затем снова открываю его с другой watchListID

СТРУКТУРОЙ ДАННЫХ:

• main.asp: ЗАГРУЗКИ>
• modal.asp : modal.asp содержит jquery сверху + два элемента div на этой странице с данными panel1.asp и panel2.asp ...
• panel1.asp : содержит приведенный выше HTML ...
• panel2.asp : не содержит ничего связанного ... только чистый HTML.

Answer 1

Следите за точкой с запятой, убедитесь, что вы заканчиваете каждую команду одной, избавит вас от головной боли позже.

Что касается событий, связанных live(), их необходимо отменить, вызвав die(). Он имеет те же параметры, что и unbind(). Взгляните на документацию .

function ajaxHandler(){
    var addassociateID = $(this).attr("id");
    var $this = $(this);
    $this.die('click');

    $.ajax({
        type: 'POST',
        url: '/data/watchlist_save.asp',
        data: {m : 'share_watchlist_add', watchListID : <%=WatchListID%>, a : addassociateID},
        async: true,
        success: function(data) {
            $(".associate_users").load("/data/sub_watch_members.asp?watchListID=<%=WatchListID%>",{cache:false},function(){
                $(".search_note").html(data);
                $this.bind('click',handler);
            });
        },
        error: function(data){
            $(".search_note").html(data);
            $this.live('click', ajaxHandler);
        }
    });     
}

$("input[name=add_associate]").live("click", ajaxHandler);

Редактировать: Забыл добавить несколько важных моментов. Вы должны отменить привязку вашего живого события прямо в обработчике кликов и перепривязать его при ошибке, точно так же, как предложено @ stefan .

Также убедитесь, что вы сохранили объект this в переменной, так как он не указывает на ваш элемент DOM в функции обратного вызова ajax. В качестве альтернативы вы можете использовать свойство context в вашем запросе ajax, посмотрите документацию .

Answer 2

Как я вижу, все, что вы хотите сделать, это связать событие один раз, а затем умереть. В последних версиях jQuery есть метод .one (), который связывает событие только один раз.

пример:

$('#myDiv').one('click', function() {
    alert('clicked once...');
});

При следующем щелчке событие щелчка не будет запускаться.

Больше на http://api.jquery.com/one/

Answer 3

Это может быть полезно - http://sholsinger.com/archive/2011/08/prevent-jquery-live-handlers-from-firing-multiple-times/

Answer 4

Я решил эту проблему сейчас, я использовал

$(document).ready

в загруженном содержимом AJAX вместе с ...

<script src="/js/jquery-ui.js"></script>

Так что я предполагаю, что он удваивается ""живая" функция!

Большое спасибо за ответы.

Answer 5

Вы можете решить вашу проблему двумя способами:

1) Переместите свой код JavaScript в main.asp вместо modal.asp.

Это мгновенно решит проблему двойного огня,Вам придется немного изменить свой код, чтобы извлечь значение WatchListID из некоторого HTML-кода внутри modal.asp, а не кодировать его напрямую, как вы (поскольку main.asp еще не будет иметь это значение).

2) Держите ваш код JavaScript там, где он есть, но прекратите использовать живые события.

Используйте простой ".click (function () {" call вместо ".live ('click', function () {".

Вы перезагружаете modal.asp каждый раз, когда открывается диалоговое окно, что означает, что ваш javascript запускается при каждой загрузке. Если вы сохраняете свой код javascript в modal.asp, то live (), вероятно, не подходит.

Answer 6

Сначала вы отменяете успех.Вам нужно отменить привязку в обработчике кликов, а затем снова добавить его в ошибку.

Answer 7

Я решил это так:

    var liveActionRemove = $('#ajax-list-action-remove');

    $(liveActionRemove).live('click', function(){
        $(liveActionRemove).die('click');

        $.ajax({
            url: '/someurl',
            success: function(data){
            }
        });
    });