用ajax调用替换列表后再次初始化jquery答案

【问题标题】：Initialize jquery again after replacing list with ajax call用ajax调用替换列表后再次初始化jquery
【发布时间】：2017-02-16 08:36:03
【问题描述】：

我有一个 Prestashop 模块来显示来自不同产品类别的最新产品列表。产品列表顶部是菜单链接，如：全部、1 类、2 类、3 类等。当页面打开时，它显示“全部”最新产品。但是，例如，当我单击类别 1 时，它使用 Ajax 仅加载属于我单击的类别的产品。

我在模块上实现了这个 jquery 插件 - https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/。

主 jquery 文件 grid.js 在</body> 结束之前加载，并通过在</body> 结束之前添加以下代码来进行初始化：

<script>
   $(function() {
      Grid.init();
   });  
</script>

当页面刚刚打开时，这很有效。但是当点击任何类别链接时。该类别的产品已加载，但网格 jquery 扩展网格不再起作用。

在页面<head>中加载的模块的js文件中，我注意到对类别的ajax调用是使用以下代码进行的：

$(document).on('click','#list-category-new-product li a',function(e){
        $('#blocknewproducts1_reload').addClass('active').prepend($('.newproduct_ajax_loader').html());
        $('#blocknewproducts1').css('opacity', '0.7');
        e.preventDefault();
        $.ajax({
            type: 'POST',
            headers: { "cache-control": "no-cache" },
            url: baseDir + 'modules/blocknewproducts1/newproduct_ajax.php',
            async: true,
            cache: false,
            dataType : "json",
            data: 'ajax_new_product=1&p=1&id_category='+$(this).attr('data-id'),
            success: function(jsonData,textStatus,jqXHR)
            {
                $('#blocknewproducts1').html('');
                $('#blocknewproducts1').html(jsonData.blocknewproduct);
                $('#blocknewproducts1').css('opacity', '1');
            }
        });
    });

我对 jquery 了解不多，所以我想知道如何在单击各种类别并通过 ajax 加载产品时使扩展预览工作。

【问题讨论】：

标签： javascript jquery smarty prestashop

【解决方案1】：

<script>
$(function() {
      Grid.init();
   }); 
</script>

是一次性功能，您需要像这样在成功调用中再次调用它

$(document).on('click','#list-category-new-product li a',function(e){
        $('#blocknewproducts1_reload').addClass('active').prepend($('.newproduct_ajax_loader').html());
        $('#blocknewproducts1').css('opacity', '0.7');
        e.preventDefault();
        $.ajax({
            type: 'POST',
            headers: { "cache-control": "no-cache" },
            url: baseDir + 'modules/blocknewproducts1/newproduct_ajax.php',
            async: true,
            cache: false,
            dataType : "json",
            data: 'ajax_new_product=1&p=1&id_category='+$(this).attr('data-id'),
            success: function(jsonData,textStatus,jqXHR)
            {
                $('#blocknewproducts1').html('');
                $('#blocknewproducts1').html(jsonData.blocknewproduct);
                $('#blocknewproducts1').css('opacity', '1');
                $(function() {
                    Grid.init();
                }); 
            }
        });
    });

【讨论】：

我实际上已经尝试过了，但没有成功。我猜这是因为成功调用的代码包含在头部中，而不是在预期放置扩展预览代码的主体末尾之前。我还将整个成功调用代码复制到正文的末尾，添加了您在上面所做的函数，但它也不起作用。
这听起来可能很愚蠢，但是否可以插入您在上面建议的代码，使得它的该方面只会像原始代码一样在正文的末尾被触发？跨度>
不行，需要重新触发的事件需要放在代码的成功回调中，你可以尝试使用一个函数然后调用它
很抱歉，您超出了我的技能水平。我仍然坚持这一点。
是的。我对jquery不太熟悉，只是复制代码并将它们放在正确的位置