創建jquery插件與多個jQuery庫

我有jQuery的多個版本。我知道你不應該使用jQuery的多個版本，但我現在無法防止這種情況發生。我定義了一個叫做renderCalendar的jquery插件，它增加了藍色邊框。當我在document.ready函數中調用插件時，出現renderCalendar錯誤，但是當我在document.ready之外調用該函數時，該插件可以工作。我究竟做錯了什麼？創建jquery插件與多個jQuery庫

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Test jQuery conflict</title> 
 
<style> 
 
\t #calendar { 
 
\t \t background: #eee; 
 
\t } 
 
\t #jquery1.7{ 
 
\t \t background: #ccc; 
 
\t } 
 

 
</style> 
 
</head> 
 

 
<body> 
 
<div id="calendar">calendar</div> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script> 
 
<script type="text/javascript"> 
 
\t console.log($().jquery); 
 

 
</script> 
 
<div id="jquery1.7">jquery 1.7</div> 
 

 

 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
<script type="text/javascript"> 
 
\t (function($){ 
 
\t \t $.fn.renderCalendar = function() { 
 
\t  \t return this.each(function() { 
 
\t   \t $(this).css("border","5px solid blue"); 
 
\t  \t }); 
 
\t \t }; 
 
\t })(jQuery); 
 
\t \t 
 
\t 
 
     $(document).ready(function() { 
 
      $("#calendar").renderCalendar(); 
 
     }); 
 
    
 

 
</script> 
 

 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
</body> 
 

 
</html>

調用外的document.ready功能：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Test jQuery conflict</title> 
 
<style> 
 
\t #calendar { 
 
\t \t background: #eee; 
 
\t } 
 
\t #jquery1.7{ 
 
\t \t background: #ccc; 
 
\t } 
 

 
</style> 
 
</head> 
 

 
<body> 
 
<div id="calendar">calendar</div> 
 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script> 
 
<script type="text/javascript"> 
 
\t console.log($().jquery); 
 

 
</script> 
 
<div id="jquery1.7">jquery 1.7</div> 
 

 

 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
<script type="text/javascript"> 
 
\t (function($){ 
 
\t \t $.fn.renderCalendar = function() { 
 
\t  \t return this.each(function() { 
 
\t   \t $(this).css("border","5px solid blue"); 
 
\t  \t }); 
 
\t \t }; 
 
\t })(jQuery); 
 
\t \t 
 
\t 
 
    // $(document).ready(function() { 
 
    //  $("#calendar").renderCalendar(); 
 
    // }); 
 
$("#calendar").renderCalendar(); 
 
    
 

 
</script> 
 

 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
</body> 
 

 
</html>

來源

2016-04-06 sonam

所以，我對這種情況的猜測是，當你裝上$ jQuery的（文檔）.ready，jQuery版本與執行$（「 #calendar「）...我只是把你的腳本標記放在所有jquery版本調用的下面，它可以工作。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Test jQuery conflict</title> 
 
    <style> 
 
    #calendar { 
 
     background: #eee; 
 
    } 
 
    
 
    #jquery1.7 { 
 
     background: #ccc; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="calendar">calendar</div> 
 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script> 
 
    <script type="text/javascript"> 
 
    console.log($().jquery); 
 
    </script> 
 
    <div id="jquery1.7">jquery 1.7</div> 
 

 

 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 

 

 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
 
    <script type="text/javascript"> 
 
    (function($) { 
 
     $.fn.renderCalendar = function() { 
 
     return this.each(function() { 
 
      $(this).css("border", "5px solid blue"); 
 
     }); 
 
     }; 
 
    })(jQuery); 
 

 

 
    $(document).ready(function() { 
 
     $("#calendar").renderCalendar(); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-04-06 02:16:05

最好的解決辦法是嘗試刪除所有版本，並保持最新的一個 –

我有jQuery的第三方插件被注入。我無法改變jQuery庫的順序 – sonam

你使用的是什麼第三方插件？ – HomemadeIcing

創建jquery插件與多個jQuery庫

回答

相關問題