Javascript 2个同名JS函数冲突 短

在同一页面上使用两个库：jQuery UI和Twitter引导：

• jQueryUI对我来说非常重要，因为几乎所有的UI都是基于它构建的
• Twitter引导仅用于功能

现在，问题是两个库都有相同的命名函数，它们彼此冲突：

详细的 以下是jQuery UI和Twitter引导按钮功能之间冲突的示例

请进来。按桌子上的“推荐”按钮

将出现jQuery UI模式窗口。我在模态窗口内使用。问题是，没有如演示中所示的向下箭头按钮

我试图找出问题的原因：查看组合框代码，当它调用.button（）时，它进入bootstrap.min.js，而不是jqui.js

正如您所见，它证明了两个js库之间存在冲突

顺便说一句，这里是它在没有引导的情况下工作良好的地方

问题 我有多种方法来解决这个冲突问题（不涉及网站的功能），我需要得到完全相同的功能

• 如果可能，在jQuery UI中（类似于但带有下拉菜单）
• 仅在CSS+HTML中使用else

---

摆脱推特引导。非常感谢任何解决方案。我已经准备好了200次来回答好的问题（作为奖励）。Thx提前

如果你只使用Twitter引导的下拉插件，你不需要

.button（）

插件

转到并取消选择所有jQuery插件，然后只选择下拉菜单。如果需要，也可以取消选择一些CSS

---

---

如果您需要两种实现（Twitter引导和jQuery UI），您可以在中将所有

.button

重命名为类似

.bsButton

（或在非精简版本中查找此部分）-未测试。

要修复引导和jQuery UI函数之间的冲突，请重命名其中一个：

<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
    $.fn.bsbutton = $.fn.button;
</script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

$.fn.bsbutton=$.fn.button；

然后您可以随意调用每个函数：

<script type="text/javascript">
    $(".button-one").button()   // jQueryUI button
    $(".button-two").bsbutton()  // Bootstrap button
</script>

$（“.button one”）.button（）//jQueryUI按钮
$（“.button two”）.bsbutton（）//引导按钮

您可以将此技术用于所需的任何功能

---

记住顺序

include A->rename A->include B

当前版本的引导（v2.2.2）现在有一个无冲突选项。只需在bootstrap和jquery脚本标记之后的某个位置插入此命令，但在使用

按钮（）之前插入此命令即可

<script type='text/javascript'>
    $.fn.bootstrapBtn = $.fn.button.noConflict();
</script>


$.fn.bootstrapBtn=$.fn.button.noConflict（）；

或者，您可以使用
$（document）.ready（handler）
，但是您仍然必须确保在调用
按钮（）
之前进行替换

执行该行代码后，
button（）
将是JqueryUI的按钮，
bootstraptn（）
将是Bootstrap的版本。
所有其他答案修复了JqueryUI按钮和Bootstrap按钮之间的冲突，但您不能将Bootstrap数据api用于重命名的
button（）
函数。只能手动使用新命名的
bootstrapBtn（）
函数

<script type='text/javascript'>
    $.fn.bootstrapBtn = $.fn.button.noConflict();
</script>

我找到了一个解决方案：


在
bootstrap.js
文件中查找并替换所有出现的regex
（\$[.\w]+\）按钮
到
\1btn
或者使用此
sed
脚本：

#!/bin/bash
# Change bootstrap3 $.fn.button() function to $.fn.btn() for no conflict with jQuery UI
sed "s/\(\$[[:alnum:]._]\+\.\)button/\1btn/g" bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.btn.js
sed "s/\(fn\.\)button/\1btn/g" bootstrap/js/bootstrap.min.js | sed "s/button\((\)/btn\1/g" > bootstrap/js/bootstrap.btn.min.js



之后，您可以使用引导数据api进行按钮绑定，也可以手动使用
btn（）
函数代替
button（）
进行引导，同时仍然使用jQuery UI
button（）
函数。

<script type='text/javascript'>
    $.fn.bootstrapBtn = $.fn.button.noConflict();
</script>

我使用定制的jQueryUI构建，具有核心、效果、交互，但没有小部件，这通常会导致冲突。
说实话，Twitter引导不是专门为jQueryUI或其他框架设计的。例如，Twitter引导将规则应用于裸元素，这将与jqueryui的规则冲突。我认为你最好的办法是用JS和CSS来命名Twitter，但这需要很多努力。因此，将该功能移植到jQueryUI对我来说是更好的方法。我与ui对话框标题栏close x图标没有出现在close按钮和bootsrap按钮中有类似的冲突。如果您使用的是2013年1月的最新版本，那么最简单的解决方案对于我来说，只有在加载jquery-ui.js之前，而不是在我第一次使用button（）之前，才有效。