javascript - Jquery之间的冲突

Question

当我在同一个文件上创建很多 jquery 函数时，我遇到了一个问题，但它不起作用。我尝试使用 de jQuery.noConflict() 函数，但它不起作用（也许我没有以好的方式使用它，或者我在错误的地方使用它）如何在我的示例代码中使用 noconflict 函数？

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.ui.core.min.js"></script>
<script type="text/javascript" src="jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="jquery.ui.tabs.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript">
        $(document).ready(function()
        {
           var jQueryTabs1Opts =
           {
              event: 'click',
              collapsible: false
           };
           $("#jQueryTabs1").tabs(jQueryTabs1Opts);
        });

</script>

<script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $('#example').dataTable( {
                "aaSorting": [[ 4, "desc" ]]
            } );
        } );
</script>

Answer 1

如果您删除重复导入，您的代码应该可以工作。

删除此行：

<script type="text/javascript" src="jquery.js"></script>

注意你导入的 UI 库需要的 jQuery 版本。

Answer 2

我找到了解决方案。解决方案是使用这样的 noConflict 函数：

<script>
var jq172 = jQuery.noConflict();
jq172(document).ready(function()
{
   var jQueryTabs1Opts =
   {
      event: 'click',
      collapsible: false
   };
   jq172("#jQueryTabs1").tabs(jQueryTabs1Opts);
}); 
</script>