停止两个jquery之间的冲突

Posted 2023-05-09

【中文标题】停止两个jquery之间的冲突

【英文标题】：Stop Conflict Between two jquery

【发布时间】：2014-06-21 17:13:27

【问题描述】：

我正在开发一款基于“codeigniter”的基于 Web 的软件。在这个软件中，他们使用了 jQueryUI、bootstrap JQuery 等。

这里我想实现内联编辑功能。我成功实现了它，但是在实现内联编辑功能之后，由于两个 jQuery 之间的冲突，其他功能无法正常工作。

这是我们添加的我的 jquery 代码：

<script>

        $(document).ready(function()
        $('div.auto').click(function()

                $('.ajax').html($('.ajax input').val());
                $('.ajax').removeClass('ajax');
                $(this).addClass('ajax');
                $(this).html('<input id="editbox" size="'+$(this).text().length+'" type="text" value="' + $(this).text() + '">');

                $('#editbox').focus();

          
          );
</script>

我还在上面的代码之前放了下面的代码来阻止 jQuery 冲突：

<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>

【问题讨论】：

你的意思是你包含两个 jQuery 版本？顺便说一句，控制台中的任何错误？你能提供任何在线链接吗？

不，实际上我不包括 2 jquery 版本，但我只是将上面的代码用于内联编辑，然后弹出功能不起作用。在发布该代码之前，新表单会像弹出一样打开，但是当我添加此代码时，它会在该选项卡中打开

那我不明白你为什么要使用 jQuery noConflict() 方法（如果不使用任何其他使用 $ 的库）。要尝试修复两个 jQuery 插件之间的冲突，请先打开控制台检查是否有任何错误

可能重复 ***.com/questions/8149129/… 并检查此以供参考 api.jquery.com/jQuery.noConflict

我的控制台显示“Uncaught TypeError: undefined is not a function”错误

【参考方案1】：

https://api.jquery.com/jQuery.noConflict/ - $.noConflict() 释放对$ 的控制，并为其分配先前分配的值。在页面下方您可以看到：

示例：加载两个版本的 jQuery（不推荐）。然后， 将 jQuery 的全局范围变量恢复为第一个加载的变量 jQuery.

<div id="log">
  <h3>Before $.noConflict(true)</h3>
</div>
<script src="//code.jquery.com/jquery-1.6.2.js"></script>

<script>
var $log = $( "#log" );

$log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );

// Restore globally scoped jQuery variables to the first version loaded
// (the newer version)

jq162 = jQuery.noConflict( true );

$log.append( "<h3>After $.noConflict(true)</h3>" );
$log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
$log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );

除此之外，不要在全局范围内使用$。切勿在全局范围内使用 $。仅在需要时将其用作本地参数。

jQuery(document).ready(function($) 
    //you may now safely use $ inside here. Or if you pass a different parameter - use that
);

替代方案：

jQuery(document).ready(function(jq) 
    //you may now safely use jq inside here. Or if you pass a different parameter - use that
    jq("#mydiv").addClass('ajax');
    //now that $ is not jQuery, but another library, you can also use that library
    $.nonJQueryFunctionOfSomeOtherLibraryUsing$Symbol();
);

【讨论】：

我同时应用了两个代码，但结果都一样不工作

请转至jsfiddle.net 并设置一个工作示例，这样我们就可以看到你写了什么，什么不工作。在这一点上我不能贡献更多，因为我不知道你尝试了什么。