Question

我试图在我的html页面中使用JQuery datepicker和Jotform。但似乎jquery和jotform毕竟不相处。

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

如果我消除上面代码的第一行，jotform工作正常，如果我消除第二行并保持第一行，datepicker将正常工作。（Jotform是一个在线表单构建器）

自2011年以来存在冲突记录，但我无法确定是否已经解决。

  $(function() {

  //-----------------------------------
  // Show Picker
  $('#startDate').datepicker({
      showButtonPanel: true
  });
  //-----------------------------------
  // Show Picker
  $('#dueDate').datepicker({
      showButtonPanel: true
  });

 });

以下是我的代码部分

<link rel="stylesheet" type="text/css" href="css/jNotify.jquery.css" media="screen" />
<script type="text/javascript" src="js/jNotify.jquery.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script src="js/jotform.js" type="text/javascript"></script>
<script type="text/javascript" src="js/ajax_load.js"></script>
<script type="text/javascript" src="js/validator.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc.js"></script>
<script type="text/javascript" src="scripts/calendar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-ar.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.datepicker-cc-fa.js"></script>
<link type="text/css" href="styles/jquery-ui-1.8.14.css" rel="stylesheet" />

任何提示和帮助都将受到高度赞赏

Answer 1

好的，这太大了，无法在评论中解释：

使用jQuery noConflict模式

http://api.jquery.com/jQuery.noConflict/

首先，在加载jQuery后添加noConflict脚本：

<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>

这样$函数再次“自由”，所以其他lib可以使用它（两个库不能使用相同的名称，它是一个全局var，所以狗屎会发生）。

好吧，现在我们不会将$用于jQuery。如果你想使用jquery，新的魔术词是jQuery（是的，非常原始的），例如：

jQuery("#menu").show();

因此，如果您必须使用datepicker，只需将$替换为jQuery即可。例如：

jQuery('#startDate').datepicker({
    showButtonPanel: true
});

请记住，关键字$不再附加到jQuery。所以你必须到处使用jQuery。或者您也可以使用新别名，例如，如果您认为jQuery太大：

var j = jQuery.noConflict();
//and now we are going to use it:
j("#menu").show();

此处有更多示例：http://api.jquery.com/jQuery.noConflict/

Answer 2

只需使用自调用匿名函数并传递jQuery并在代码中将其作为$捕获，例如：

 (function($){

  $(function() {

  //-----------------------------------
  // Show Picker
  $('#startDate').datepicker({
      showButtonPanel: true
  });
  //-----------------------------------
  // Show Picker
  $('#dueDate').datepicker({
      showButtonPanel: true
  });

});

})(jQuery);

并修改jquery脚本包含（与TheBronx建议相同）：

<!-- this is where you are loading jQuery -->
<script type="text/javascript" src="here/you/are/loading/jquery.js"></script>
<!-- and now lets enter in noConflict mode -->
<script type="text/javascript">
$.noConflict();
</script>

这是使用最少代码更改的唯一方法。感谢。

JotForm与JQuery冲突

2 个答案:

使用jQuery noConflict模式