Question

我有多个版本的jquery。我知道你不应该使用多个版本的jquery，但我现在无法阻止这种情况发生。我已经定义了一个名为renderCalendar的jquery插件，它添加了蓝色边框。当我在document.ready函数中调用插件时，我得到一个错误，renderCalendar不是一个函数，但是当我调用document.ready之外的函数时，该插件可以工作。我做错了什么？

 <!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">
	 (function($){
	 	$.fn.renderCalendar = function() {
	    	return this.each(function() {
	        	$(this).css("border","5px solid blue");
	    	});
	 	};
	 })(jQuery);
		
	
      $(document).ready(function () {
          $("#calendar").renderCalendar();
      });
    

</script>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
</body>

</html>

调用外部文档.ready function：

 <!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">
	 (function($){
	 	$.fn.renderCalendar = function() {
	    	return this.each(function() {
	        	$(this).css("border","5px solid blue");
	    	});
	 	};
	 })(jQuery);
		
	
     // $(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>

Answer 1

所以，我对这种情况的猜测是当你在$（document）.ready上加载jquery时，jQuery版本与你执行$（＆＃34; #calendar＆＃34;）时不同。我只是将脚本标记放在所有jquery版本调用之下，它就可以了。

＆＃13;

<!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>

＆＃13;

使用多个jquery库创建jquery插件

1 个答案: