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

Question

我有一个查询插件，我正在处理和某些函数在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(); 
     }); 
    }); 
    }); 

Answer 1

根据您所提供的代码，我可能会说你有一些其他代码调用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() ...