有没有办法在 jQuery.noConflict() 中使用 bootstrap 3.0 插件？

Posted 2023-05-08

【中文标题】有没有办法在 jQuery.noConflict() 中使用 bootstrap 3.0 插件？

【英文标题】：Is there a way to use bootstrap 3.0 plugins with jQuery.noConflict()?

【发布时间】：2013-11-03 13:58:05

【问题描述】：

我们目前正在页面上加载 2 个不同版本的 jQuery，1.4.2 和 1.10.1。 $ 和 window.jQuery 对象当前指向 1.4.2。

我们使用 1.10.1 版本的 noConflict() 将其设置为 $jq1：

var $jq1 = jQuery.noConflict(true);

有没有办法让 Bootstrap 3.0 插件自动使用 $jq1 而不是 $ 或 window.jQuery？

【问题讨论】：

Twitter Bootstrap source code 指的是window.jQuery。也许您可以尝试在加载插件之前更改此变量，然后再切换回来？

简单的解决方案 - 停止在您的页面上使用 2 个不同版本的 jQuery。如果您不这样做，您现在遇到的问题将是您最不担心的问题。

我希望我可以，因为这真的很容易，但是在同一页面上仍有很多遗留代码需要运行。我会尝试让 Bootstrap 使用 window.jQuery 加载，然后在 bootstrap 加载后运行 noConflict() 函数。

【参考方案1】：

如果你在加载 jQuery 版本 1.10.1 后直接加载 bootstrap JS，然后将 jQuery 置于无冲突模式，它应该可以工作。

例如：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Load any Bootsrap JS files before calling jQuery.noConflict()  -->
<script src="bootstrap.js"></script>
<script>
// Put jQuery 1.10.2 into noConflict mode.
var $jq1 = jQuery.noConflict(true);
</script>

<!-- This can be before or after the above -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

jQuery.noConflict(true) 会将$ 和jQuery 重新分配到它们之​​前的值，因此是否先加载版本 1.4.2 并不重要。

这确实意味着您的用户将下载 jQuery 两次，并且您需要记住在使用 jQuery 进行任何操作时是使用 $jq1 还是 $。

【讨论】：

如果我使用 var $jq1 = jQuery.noConflict(true)。我可以使用 alert($jq1("#id").val())???指导我。

是的，$jq1 将是 jQuery 版本 1.10.2，$ 将是 1.4.2

但是为什么版本 1.10.2 是 $jq1。只是因为 1.10.2 版本加载较早。

上例中调用jQuery.noConflict时加载的jQuery版本是1.10.2，所以$jq1将被设置为。

太棒了，感谢您的帮助

【参考方案2】：

我喜欢用户“ajpiano”在https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page提供的解释：

<script src='jquery-1.3.2.js'></script>
<script>
    var jq132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
    var jq142 = jQuery.noConflict();
</script>

【参考方案3】：

首先加载旧版本的 Jquery。

然后你的 Boostrap js,css 就到这里了。 最后加上这个，

<script type="text/javascript">
    var $versionNumberJ1 = jQuery.noConflict(true);
</script>

那么，就这样使用吧，

<script>
  $versionNumberJ1 ( function() 
    $versionNumberJ1 ( "#tabsModal" ).tabs();
   );
  </script>