ajax后重新启动jquery插件，导致事件多次触发

reinitiate jquery plugin after ajax, causes events to fire multiple times

本文关键字：事件 重新启动 jquery 插件 ajax      更新时间：2023-09-26

我有一个查询插件，我正在工作，我ajax内容加载后的某些功能。问题是，假设我重新启动它15次，点击事件将触发15次，当它只被点击一次。

有没有办法让它不一直堆积起来?我调用了addToCart onload和itemDetail在ajax返回

之后

谢谢!

function addToCart()
{
  $(options.add_to_cart).click(function ()
  {
    event.preventDefault();
    var id = $(this).attr('id');
    store_item_id_val = id.replace('store-item-id-', '');
    var quantity = $('.quantity-' + store_item_id_val);
    if (quantity.val() < 1)
    {
      showError('Please enter a quantity of 1 or more.');
      $(quantity).val(1);
      return this;
    }
    $.post($(this).attr('href'),
    { store_item_id: store_item_id_val, quantity: quantity.val() },
      function (data)
      {
        var result = jQuery.parseJSON(data);
        renderCart(result);
      });
  });
  return this;
}
function itemDetails()
{
  $('.item-details').click(function ()
  {
    event.preventDefault();
    var url = $(this).attr('href');
    $.getJSON(url, function (result)
    {
      $('.modal-title').empty().html(result.title);
      $('.modal-content').empty().html(result.html);
      $('#modal').slideDown(100);
      $('.ui-button').button();
      addToCart();
      $('.modal-close').click(function ()
      {
        event.preventDefault();
        $('#modal').hide();
      });
    });
  });

根据您提供的代码，我可能会说您还有一些其他代码调用itemDetails()。每次调用itemDetails()时，它将click的另一个事件处理程序添加到.item-details。你可以这样做:

$(document).ready(function()
{
  $('.item-details').click(function ()
  {
    event.preventDefault();
    var url = $(this).attr('href');
    $.getJSON(url, function (result)
    {
      $('.modal-title').empty().html(result.title);
      $('.modal-content').empty().html(result.html);
      $('#modal').slideDown(100);
      $('.ui-button').button();
      addToCart();
      $('.modal-close').click(function ()
      {
        event.preventDefault();
        $('#modal').hide();
      });
    });
  });
});

这将把事件处理程序放在.item-details类项目上，并且只触发一次事件。如果您添加和删除了动态.item-details，您可能应该使用:

$('.item-details').live('click', function() ...
相关文章：