Question

我在页面上使用了3个jQuery插件。它们都可以正常工作，直到我进行AJAX调用并加载新元素。如果我只是重新初始化这些插件，那么由于一些初始化多次，它会导致页面出现混乱。我只是想为新项目初始化它们。任何人都可以协助吗？

我正在使用悬停字幕（http://ryun.github.io/HCaptions/），（http://www.drewgreenwell.com/projects/metrojs）和倒计时（http://keith-wood.name/countdown.html）。

 $(document).ready(function () {
    // mouseover
    $('.hcaption').hcaptions({effect: "fade"});
    //animate tiles
    $(".live-tile").liveTile({pauseOnHover: true});

    function loadMoreItems(getQuery, page) {
        //reset infinate scroll somehow
        /*jQuery.ias({
            //container: '#container'
        });
        //setTimeout("jQuery.ias({container: '#container'})",1000);*/
        //load items
        $.get(getQuery, null, function(data) {
        var container = $(data).find('#container');
        $( container ).find( '.hcaption' ).hcaptions({effect: "fade"});
        //remove any repeated discounts
        $(".element").each(function() { 
            var discount_id = "#" + this.id;
            //$('.hcaption').hcaptions({effect: "fade"});
        });
        if (container) {
            var newItemsHTML = "";
            newItemsHTML = $(container).html();
            var $newItems = $(newItemsHTML);
            $container.isotope('insert', $newItems, true);
        }
    }, 'html');
}
}

修改在下面的建议之后，我设法在元素首次加载时添加一个类。我现在正努力在过滤器上添加.hcaptions（{effect：“fade”}）给他们。以下都不起作用。

                     //$('.hcaption').hcaptions({effect: "fade"});
                    //$(container).find('.hcaption').not("activated").hcaptions({effect: "fade"});
                     /*$(container).find('.hcaption').not("activated").hcaptions({effect: "fade"}).addClass("activated");
                     $(container).find('.hcaption').not("activated");*/

Answer 1

您应该尝试在使用插件初始化的元素上添加类似alreadyActivated的类，并仅针对没有此类的项目执行过滤：

$('.hcaption').hcaptions({effect: "fade"}).addClass("alreadyActivated");
$(".live-tile").liveTile({pauseOnHover: true}).addClass("alreadyActivated");

//target only elements not activated, and then add the class
$('.hcaption').not("alreadyActivated").hcaptions({effect: "fade"}).addClass("alreadyActivated");

jQuery / AJAX - 在AJAX仅调用新项目后重新初始化函数

1 个答案: