Запрос Ajax называется несколько раз, хотя мне нужно только один раз?

Question

Я работаю над веб-приложением электронной коммерции. Есть модуль списка желаний, который я пытаюсь реализовать. Я добавляю продукты в список пожеланий, используя вызовы ajax, а также удаляя его с помощью ajax. Добавляющая часть работает нормально, но у меня есть проблема с удалением части. Я пытаюсь сделать это, сделав ajax-вызов для извлечения элементов списка пожеланий из базы данных и динамического добавления кнопки удаления с помощью jquery. Хотя я знаю, что мне нужно использовать функцию .live для присоединения к ней события, которое я сделал, но когда я нажимаю на кнопку, все элементы, которые присутствуют в списке желаний, удаляются. Я вижу, что несколько запросов ajax были сделаны в консоли под вкладкой сети, и я не понимаю, почему, хотя я щелкнул его только один раз. Ниже приведен фрагмент моего кода

$.ajax({ 
    type: "POST", 
    url: "fetchdata1", 
    data: "cat=" + cat, 
    success: function(data) { 
    productContainer.innerHTML = ""; 
    var $productContainer = $('#productContainer'); 

    $.each(data, function(key, value) { 
     if (value['newVar'] === 1) { 
     $productContainer.append("<div id='productBox' class='grid_3'>\n\ 
      <a href='product.jsp?id=" + value['id'] + "'><img src='" + value["image"] + "'/></a><br/>\n\ 
      <a href='product.jsp?id=" + value['id'] + "'><span class='black'>" + value['name'] + "</span></a><br/>\n\ 
      <span class='black'>By " + value['company'] + "</span><br/><span class='red'>RS." + value['price'] + "</span>\n\ 
      <br/><br/><a id='remove' href='#'>REMOVE</a></div>"); 
     foo(value['id']); 
     } else { 
     $productContainer.append("<div id='productBox' class='grid_3'>\n\ 
      <a href='product.jsp?id=" + value['id'] + "'><img src='" + value["image"] + "'/></a><br/>\n\ 
      <a href='product.jsp?id=" + value['id'] + "'><span class='black'>" + value['name'] + "</span></a><br/>\n\ 
      <span class='black'>By " + value['company'] + "</span><br/><span class='red'>RS." + value['price'] + "</span></div>"); 
     } 
    }); 
    } 
}); 

function foo(value) { 
    var pid = value; 
    $('#remove').live("click", function() { 
    $.ajax({ 
     type: "POST", 
     url: "removeFromWishlist", 
     data: "pid=" + pid, 
     success: function(response) { 
     } 
    }); 
    }); 

В первом запросе Аякса я выборки продуктов из базы данных затем добавить кнопку удалить в ней динамически затем вызвать функцию foo которые прикрепляются событие щелчка, используя .live функцию, а затем сделать вызовите базу данных, чтобы удалить ее. Эй, ребята, я не профессионал в Интернете, так что легко, если я совершу какую-то глупую ошибку.
Спасибо!

Answer 1

Проблема произошла из-за того, что вы регистрируете прослушиватель несколько раз в каждом цикле. Поэтому, чтобы решить проблему, вам нужно зарегистрироваться один раз после того, как кнопка была заполнена. Я также изменить селектор класса «.remove», потому что вы будете иметь несколько кнопку удалить так, используя идентификатор будет дублироваться, и с помощью Jquery .На() вместо .live() (устаревшее)

$.ajax({ 
 

 
    type: "POST", 
 
    url: "fetchdata1", 
 
    data: "cat=" + cat, 
 

 
    success: function(data) { 
 
    productContainer.innerHTML = ""; 
 
    var $productContainer = $('#productContainer'); 
 
    $.each(data, function(key, value) { 
 
     if (value['newVar'] === 1) { 
 
     $productContainer.append("<div id='productBox' class='grid_3'>\n\ 
 
       <a href='product.jsp?id=" + value['id'] + "'><img src='" + value["image"] + "'/></a><br/>\n\ 
 
       <a href='product.jsp?id=" + value['id'] + "'><span class='black'>" + value['name'] + "</span></a><br/>\n\ 
 
       <span class='black'>By " + value['company'] + "</span><br/><span class='red'>RS." + value['price'] + "</span>\n\ 
 
       <br/><br/><a class='remove' id='remove' data-pid='" + value['id'] + "' href='#'>REMOVE</a></div>"); 
 
     } else { 
 

 
     $productContainer.append("<div id='productBox' class='grid_3'>\n\ 
 
       <a href='product.jsp?id=" + value['id'] + "'><img src='" + value["image"] + "'/></a><br/>\n\ 
 
       <a href='product.jsp?id=" + value['id'] + "'><span class='black'>" + value['name'] + "</span></a><br/>\n\ 
 
       <span class='black'>By " + value['company'] + "</span><br/><span class='red'>RS." + value['price'] + "</span></div>"); 
 
     } 
 
    }); 
 
    foo(); 
 
    } 
 

 
}); 
 

 

 
function foo() { 
 
    $('.remove').on("click", function() { 
 
    var pid = $(this).data("pid"); 
 
    $.ajax({ 
 

 
     type: "POST", 
 
     url: "removeFromWishlist", 
 
     data: "pid=" + pid, 
 

 
     success: function(response) { 
 

 

 
     } 
 

 

 
    }); 
 

 

 

 
    });

Answer 2

Задача: У вас одинаковый идентификатор для множественной гиперссылки, и вы используете функцию .live на селекторе «id based». Он снова нажимает функцию & на первый элемент.

Решение: Обновите гиперссылкой

<a href='#' onclick="foo(this)" pid=value['id']>REMOVE</a> 

Тогда в обув функция

function foo(obj) { 
    var pid = $(obj).attr("pid"); 
    $(obj).bind("click", function() { 
    $.ajax({ 
     type: "POST", 
     url: "removeFromWishlist", 
     data: "pid=" + pid, 
     success: function(response) { 
     } 
    }); 
    }); 

Answer 3

() я не понимаю, почему вы используете тот же идентификатор несколько раз.

и afaik, jQuery.live уже устарели. вы можете использовать это, если вы хотите, чтобы получить живое поведение:

$(document).on('click', 'element-selector', function(){ 
    ... 
}); 

с кодом, он может переписан на:

$(document).on('click', '[id=remove]', function(){ 
    ...ajax call... 
}); 

теперь проблема с функцией извлечения данных заключается в следующем:

$.each(data, function(key, value) { 
     if (value['newVar'] === 1) { 
     ...append element... 
     **foo(value['id']);** 
     } else { 
     ...append element... 
     } 
}); 

Как мы знаем, foo() - это ваша функция, которая связывает удаление поведения. на основе вашего кода, всякий раз, когда данные извлечения имеют newVar = 1, он будет напрямую вызывать foo. которые означают связывание, удаляют поведение несколько раз, столько же, сколько и новыйVar = 1.

решение: вы можете поместить PID в качестве атрибута на ваш элемент может быть что-то вроде <a href="x" pid="123">remove</a> и в функции нажмите кнопку Удалить, вы можете использовать $ (это) .attr («PID»), чтобы получить это значение , и удалите этот контент foo() вне функции, так как $(element).live(...) или $(document).on(event, element, ...) прослушат элемент, даже элемент, динамически добавленный на страницу.