如何禁用或销毁 jQuery 插件功能？答案

【问题标题】：How to disable or destroy a jQuery plugin function?如何禁用或销毁 jQuery 插件功能？
【发布时间】：2014-03-01 19:17:50
【问题描述】：

我有一个使用jQuery gridrotator 效果的画廊。我想在点击按钮“启用效果”时启用效果。

<button id="build">Enable Effect</button>
<script type="text/javascript">
    $("button#build").click(function(){
        $('#ri-grid').gridrotator();
    });
</script>

enablig 效果很好（见test）。要禁用效果，此插件没有 destroy 方法。所以我尝试将return 转为false 的功能但不起作用。

<button id="destroy">Disable Effect</button>
<script type="text/javascript">
    $("button#destroy").click(function(){
        $('#ri-grid').gridrotator(function(){
            return false;
        });
    });
</script>

如何禁用或销毁此功能？
非常感谢您的帮助！ :)

【问题讨论】：

您需要取消绑定任何事件并删除插件添加的任何节点或类。你希望最终的结果是什么？您是否希望图像仍然显示，而不是动画？
是的，我希望图像在没有动画的情况下仍然显示。

标签： javascript jquery jquery-plugins

【解决方案1】：

我制作并测试了一个很好的解决方法，不是完美的解决方案，但它确实有效。只需从 Dom 树中删除该项目，然后重新加载它

        $('#ri-grid').html($('#ri-grid').html());

【讨论】：

它并不完美，但对我来说已经足够了，谢谢你的时间:)
不客气 :)，如果您找到更好的解决方法，请发布它

【解决方案2】：

也许有更好的方法，但这个 hack 似乎有效：

$('#ri-grid').data('gridrotator').$items.length = 0;

【讨论】：

【解决方案3】：

gridrotator 插件似乎没有内置禁用功能。

使用.remove() 将删除所有绑定事件和与被删除元素关联的jQuery 数据。

尝试移除元素并将其重新插入到原来的位置。

$("button#destroy").click(function(){

  // remove plugin class so it doesn't rebind
  $("#ri-grid").removeClass("gridrotator");

  var $prev = $("#ri-grid").prev();
  if($prev.length) {

    // put back between siblings if necessary
    $prev.append($("#ri-grid").remove());

  } else {

    // or just re-add to its parent
    var $parent = $("#ri-grid").parent();
    $parent.prepend($("#ri-grid").remove());

  }

});

【讨论】：

非常感谢！但仅在单击时有效，然后动画重新启动。
我会尝试为这个插件创建destroy方法。
已更新以删除“gridrotator”类，因此插件在删除和插入后不会重新绑定到它
有什么进展吗？我已经尝试过了，但它只会在重新开始之前切断动画。

【解决方案4】：

希望这会让你微笑 -

<button id="destroy">Disable Effect</button>

<script type="text/javascript">
    $("button#destroy").click(function(){
        $('#ri-grid').gridrotator().stop();
    });
</script>

了解更多关于 .stop() 函数 - http://api.jquery.com/stop/

【讨论】：

【解决方案5】：

<button id="destroy">Disable Effect</button>
<script type="text/javascript">
    $("button#destroy").click(function(){
        $('#ri-grid').stop();
    });
</script>

【讨论】：

谢谢！但不会停止动画。