Предотвращение дублирования вызовов событий ajaxLoad, добавленных с событием click

Question

Я использую MVC Razor. Общая цель - создать всплывающую страницу «Просмотр».

кнопка вид

Печать на родительской странице, при нажатии на событие Ajax обжигали, который будет заполнять пустой DIV с содержимым, которые должны быть включены в предварительный просмотр печати:

//from the view 
@Ajax.ActionLink("prntPreview", "Display", new { ID = Model.Detail.ID }, new AjaxOptions { UpdateTargetId = "modal" }, new { @class = "btnPreview" }) 

тогда, с помощью JavasScript/JQuery клонировать содержимое этого вновь заселенной DIV и создать новое окно с содержимым:

//in the scripts file 
$('.btnPreview').on('click', function() { 
    $(document).ajaxStop(function() { 
     var pageData = $('#modal').html(); 
     setTimeout(//add a slight delay 
      function() { 
       PopupPrint(pageData); 
      }, 300); 
    }); 
}); 

function PopupPrint(data) { 
    var mywindow = window.open('', '', 'height=500,width=800,resizable,scrollbars'); 
    mywindow.document.write(data); 
    mywindow.focus(); 
    //do some other stuff here 
} 

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

Я думаю, что проблема заключается в том, что каждый раз, когда нажимается .btnPreview, создается новое событие $(document).ajaxStop, в результате чего событие срабатывает многократно.

Я попытался создать ajaxStop в качестве именованной функции, которая объявлена ​​вне рамок события щелчка, а затем очистить его, но это приводит к тому же результату:

var evnt = ""; 
$('.btnPreview').on('click', function() { 
    evnt = 
    $(document).ajaxStop(function() { 
     var pageData = $('#modal').html(); 
     setTimeout(//add a slight delay 
      function() { 
       PopupPrint(pageData); 
       evnt = ""; 
      }, 300); 
    }); 
}); 

У меня также есть другие ajaxStop события инициализирован поэтому не хотите полностью отменить событие ajaxStop. Можно ли получить имя или что-то из каждого события ajax, чтобы я мог очистить это событие или подобное?

Answer 1

Было 2 вопроса, которые мне нужно было адресовать. Ответ заключается в том, чтобы отвязать событие ajax после того, как он проверил, что запрос был завершен, и отвязать и снова нажать кнопку запуска кнопки.

Это, как я это сделал:

//in the scripts file 
$('.btnPreview').off('click').on('click', function() { 

    $(document).ajaxComplete(function (e) { 
     var pageData = $('#modal').html(); 
     setTimeout(//add a slight delay 
     function() { 
      PopupPrint(pageData); 
     }, 300); 
     $(this).off(e); 
    }); 

}); 

Я развязал событие щелчка, добавив .off('click') перед .on. это то, что остановило его выскакивание несколько раз.

Другая проблема в том, что в любое время любое событие ajax завершено (вызвано чем-то другим), которое также создало бы всплывающее окно - чтобы обойти это, я добавил $(this).unbind(e); в конец блока кода, который удалил привязку ajaxComplete, которая была срабатывает каждый раз, когда любое событие ajax завершено.

Answer 2

Вы можете предотвратить добавление дополнительных триггеров, проверяя с переменной за пределами сферы деятельности, как это:

(function() { 
 
    var alreadyAdded = false; 
 
    $('.btnPreview').on('click', function() { 
 
    if (!alreadyAdded) { 
 
     $('.eventTrigger').click(function() { 
 
     console.log('printing!'); 
 
     }); 
 
     alreadyAdded = true; 
 
    } 
 
    }); 
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="btnPreview">Add Event</button> 
 
<button class="eventTrigger">Trigger</button>

Пожалуйста, обратите внимание, что переменная и функция инкапсулируются в прямоприменяемых анонимной функции и не загрязняют глобальное пространство.

Выходной сигнал образца можно увидеть в консоли разработчика. Если вы удалите if-check, каждый щелчок на кнопке «Добавить событие» вызывает дополнительную операцию печати на кнопке «Триггер» при каждом нажатии (что является вашей проблемой). При наличии if на кнопке триггера будет только одно событие.