javascript - 如何解决 jQuery 冲突？

Question

我有一个 jQuery 自定义文件，该文件禁用或与我的其他 jQuery 文件发生冲突，请问我该如何解决此问题。请看下面:我的自定义文件:

$(".search").keyup(function() 
{ 
var searchid = $(this).val();
var dataString = 'search='+ searchid;
if(searchid!='')
{
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
    $("#result").html(html).show();
    }
    });
}return false;    
});

冲突文件:

<script src="js/jquery.isotope.min.js"></script>
<script src="js/nprogress.js"></script>

如果这个问题得到解决，我会非常高兴。

Answer 1

我假设您知道 jQuery 存在冲突 - 您已经检查了控制台错误等。

您可以将 jQuery 包装在自动执行的匿名函数中，如下所示:

(function($) { 
  $(".search").keyup(function() 
  { 
  var searchid = $(this).val();
  var dataString = 'search='+ searchid;
  if(searchid!='')
  {
    $.ajax({
    type: "POST",
    url: "search.php",
    data: dataString,
    cache: false,
    success: function(html)
       {
         $("#result").html(html).show();
       }
     });
   }return false;    
  });
})(jQuery);

编辑 - 对上面发生的事情的一些解释。为了防止与其他脚本/框架发生任何潜在的冲突，我们将 jQuery 对象作为参数传递给我们的函数(因此 function($))。这样做的好处是您现在可以在函数内随意使用 $ 。不用担心与全局范围内的其他脚本发生冲突。