Обрабатывается несколько рас запрос ajax?

Question

[Shevalye]

Есть динамически созданные классы:

<div class='menuline' data1=''></div>
<div class='menuline' data1=''></div>
<div class='menuline' data1=''></div>

и т.д.

Мне нужно при нажатии на каждый menuline обработать запрос:

$(document).delegate( ".menuline", "click", function() {
    $.ajax({
        url: 'info.php',        
        method: 'get',           
        dataType: 'html',          
        data: { data1: $(this).attr('data1')},    
        success: function(data){ 
        $('#menuserios').empty();   
        $('#menuserios').append(data);
        }
    }); 

});

При первом клике на элемент "menuline" мне выдает результат. При втором клике дважды результат, при третьем - четыре раза и т.д. в геометрической прогрессии.

Подскажите пожалуйста, можно ли как ни будь, при каждом клике обнулять функцию? Чтобы при каждом нажатии на "menuline" она срабатывала лишь по одному разу.

Answer 1

[My1Name]

Оберните участок кода (в какой-нибудь ID). Например:

<div id="myID">
<div class='menuline' data1=''></div>
<div class='menuline' data1=''></div>
<div class='menuline' data1=''></div>
</div>

Добавьте правильно обработчик событий:

$("#myID").click(function (event){
  if(event.target.closest('.menuline')){
 $.ajax({
.....

Comments

[Сергей delphinpro]

Добавьте правильно обработчик событий:

Он сделал ровно то же самое, только на всем документе. Разницы нет.

[My1Name]

Сергей delphinpro, разница как-раз таки есть: delegate - устанавливает обработчик на каждый элемент, а не на 1 блок ID в котором содержатся все элементы. От того и происходит накапливание событий. https://api.jquery.com/delegate/

[Сергей delphinpro]

My1Name, Вы не правы. Устанавливается именно один обработчик на корневой элемент. События перехватываются на всех потомках с указанным селектором. Перечитайте внимательнее ссылку, которую вы привели. Там речь идет о нескольких событиях, а не элементах.

Этот метод давно устарел, но все еще присутствует в библиотеке.
Рекомендуется вместо него использовать .on()

Пруф (понажимайте на любые кнопки, обработчики не множатся):

[My1Name]

Сергей delphinpro, тогда почему происходит накапливание?

При первом клике на элемент "menuline" мне выдает результат. При втором клике дважды результат, при третьем - четыре раза и т.д. в геометрической прогрессии.

Лично я делаю unbind или .off('click') по завершении работы с селектором и, таких проблем не возникнет. Всячески стараюсь избегать использования .on() или .delegate()

[Сергей delphinpro]

My1Name, не знаю. В приведенном автором коде проблемы нет. Сайд-эффект возникает где-то в другом месте.

[My1Name]

Сергей delphinpro, Я уже сталкивался с подобной проблемой: Как сделать preview img by input file? Она решается приблизительно следующим образом:

$(div).off('change');
$(div).unbind('click');

Но, если мы используем document вместо ID селектора, то такое решение отключит любой click на странице.

Answer 2

[Сергей delphinpro]

В приведенном коде проблемы нет. Сайд-эффект возникает где-то в другом месте.
Единственное, что могу предположить – в ответе info.php содержится такой же скрипт. А так как jquery под капотом выполняет все скрипты, если они загрузились с разметкой аяксом, то там и происходит повторное навешивание событий.