Question

我正在使用jQuery网格滑块插件，我想在DOM操作后再次运行。

我怀疑我的问题与此类似 - Any way to rerun a jQuery plugin after DOM modification? - 但我的尝试不起作用。

以下是设置：

当页面加载时，网格插件js和选项js针对无序列表运行，如：

<div class="panel">
    <div class="g-container">
        <div class="g-slider">        
            <div class="tiles">
                <ul>                
                    <li><a href="#"><img src="Images/image-01.jpg"></a><div><h1>automotive</h1></div></li>                                          
                    <li><a href="#"><img src="Images/image-03.jpg"></a><div><h1>electronics</h1></div></li>                                             
                    <li><a href="#"><img src="Images/image-02.jpg"></a><div><h1>medical</h1></div></li>                                             
                    <li><a href="#"><img src="Images/image-11.jpg"></a><div><h1>automotive</h1></div></li>                                          
                    <li><a href="#"><img src="Images/image-02.jpg"></a><div><h1>automotive</h1></div></li>                                          
                    <li><a href="#"><img src="Images/image-09.jpg"></a><div><h1>medical</h1></div></li>                                             
                    <li><a href="#"><img src="Images/image-11.jpg"></a><div><h1>electronics</h1></div></li>                                             
                </ul>             
            </div>
        </div> 
    </div>
</div>

...并创建网格滑块。以下是它的示例：http://1.s3.envato.com/files/27300390/index.html

一切正常。

（长话短说）我有一个很大的类别列表，这些类别都是我放在div持有者中的组合在一起，如下所示：

<div id="listing-holder">
    <ul>                
        <li><a href="#"><img src="Images/car-01.jpg"></a><div><h1>automotive</h1></div></li>                                            
        <li><a href="#"><img src="Images/car-01.jpg"></a><div><h1>electronics</h1></div></li>                                           
        ...
    </ul>
</div>

这些类别是动态创建的，并且位于一个大的（页面外隐藏）组中。因此，可能有20个类别和100个项目（在我的示例中，图像）。这些项目可能出现在多个类别中，但我只想一次显示一个。

页面上的其他地方有一些导航链接。单击其中一个链接时，＃listing-holder中的项目将复制到.tiles ul中。然后根据.tiles ul中的标头标签检查其名称，删除任何不匹配的项目。然后，我希望插件再次运行，以便分页和滑块在更改之前工作，但是使用新的分页（如果它或多或少）。像这样：

$("#left-menu").delegate("a", "click", function(e) {
    var itemClicked;
    itemClicked = $(this).text();
    $('.g-container .g-slider .tiles').html('');
    $('.g-container .g-slider .tiles').html($('#listing-holder').html());
    $(".g-container .g-slider .tiles h1:not(:contains(" + itemClicked + "))").closest('li').remove();
    init(); // this isn't working the way I expected it to
});

以下是（相关信息）选项js：

$(document).ready(  
    function() {
        var $panel = $(".panel");       
        var $container = $panel.find(".g-container");
        ... // more variables

        $(".g-container").gridSlider({
            num_cols:5,
            num_rows:3,
            ... // more settings
        });

        $submitButton.click(function() {
            $container.undoChanges()
            .setGridSize($gridCol.val(),$gridRow.val())                   
            .setNoCategory($categories.filter(":checked").val() == "no")
            ... // more settings
            .updateChanges(); // this is in the grid.js         
            setPanelWidth();
        });

        $resetButton.click(function() {
            init();
            $submitButton.trigger("click");
        });

        var init = function() {
            $gridCol.val(5);
            $gridRow.val(3);
            ... // more settings
        }

        var setPanelWidth = function() {
            var width = $container.find(">div").outerWidth();
            if (width < panelWidth) {
                width = panelWidth; 
            }
            $panel.css({width:width, marginLeft:-width/2});
            ... // more settings
        }

        init();
    }
);

我试过调用init函数，它确实调用了它，但似乎没有任何事情发生。我在grid.js的开头和结尾放置了警报（它被缩小了），它们都被解雇了，所以它似乎正在经历。

我以为我必须使用这样的东西：

(function( $ ){
    $.fn.myPlugin = (function(){
        {
        // do something...
        }
    });
})(jQuery);

...但是因为我能够从options.js调用init，所以我没有去那条路（但是我愿意重新访问它，因为我可能没有错误地实现它）。

我已经在这里待了大约一个星期，我怀疑我接近这个错误，并且可以使用一些方向。

我想我可以通过创建所有类别来解决问题，然后使用像getScript（）之类的东西来运行。我认为那会有用。问题是可能存在数十个类别，其中的项目可能会出现在多个类别中。

我认为（使用手牌处理）如果我只有一个列表并从该列表中选择我需要的东西，这取决于点击，这将是要走的路。我能成功地做到这一点。它只是将它连接到无效的滑块上。

如果需要提供更多详细信息，请与我们联系。

感谢。

斯蒂芬

Answer 1

我不熟悉网格滑块插件。但是你试过完全破坏容器DOM然后重新创建和插入它。然后再次在新创建的DOM上调用.gridSlider函数？

针对更新的DOM重新运行jQuery插件

1 个答案: