jQuery DatePicker 与包含文件中的 DatePicker 冲突答案

【问题标题】：jQuery DatePicker conflict with DatePicker from included filejQuery DatePicker 与包含文件中的 DatePicker 冲突
【发布时间】：2015-03-23 12:05:21
【问题描述】：

我有两个 php 页面，search.php 和 result.php。这两个页面都使用 jQuery，并且都具有 jQueryUI 日期选择器，并且彼此完美地独立工作。

我在我的 result.php 文件中包含了 search.php，因为我想将它用作侧边栏，现在我似乎有某种冲突，因为 search.php 中的日期选择器已经停止工作，因为日历没有出现，因此无法使用。 jQuery 在这两个文件中都有效，我已经通过打印到屏幕上确认了这一点。此外，如果我从 result.php 中删除 datepicker 初始化代码（留下我在页面中也有的其他 jQuery 代码），那么 search.php 中的其他 datepicker 将再次开始工作。 ID 是唯一的，我使用 noConflict 来确保 jQuery 可以在两个页面上工作，正如我所说，它确实 - 唯一的问题是当我在 result.php 上初始化 datepicker 时，它会导致 search.php 中的那些停止工作.

使用 IE 的 JS 调试器我可以看到 result.php 中的日期选择器首先被初始化，然后其他的被初始化。没有脚本错误或警告，所以我不知道还能去哪里！任何帮助表示赞赏。

更新我已经删除了所有不相关的代码，所以我可以在这里上传。有两个文件，testSearch.php 和 testResult.php。 testResult.php 包含 test.search.php，因为它将显示为侧边栏。两个脚本都独立工作，但一旦启用，testSearch.php 中的日期选择器就会停止工作。

testResult.php

<!DOCTYPE html>
<html>
<head>
 <!-- jQuery -->
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
 <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
</head>
<body>
 <div id="sidebar"><?php include 'testSearch.php';?></div>
 <div id="content">
  <div id="availCal"></div>
 </div>

 <script>
  var jResult = jQuery.noConflict(true);
  jResult(document).ready(function() {
   jResult( "#availCal" ).datepicker({
    changeMonth: false,
    changeYear: false,
    firstDay: 1,
    numberOfMonths: 3,
    dateFormat: "dd-mm-yy",
    showCurrentAtPos:1
   });
  });
 </script>

</body>

testSearch.php

<!-- include jquery and jquery ui -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />

<label for="arrPicker">Arrival date:</label><br />
<input class="dateSelect" type="text" id="arrPicker" name="arr" value="<?php echo $arr; ?>" readonly />

<script>
 var jSearch = jQuery.noConflict(true);
 jSearch(document).ready(function() {
  jSearch('.dateSelect').each(function(){
   jSearch(this).datepicker({
    changeMonth: true,
    changeYear: true,
    firstDay: 1,
    constrainInput: true,
    dateFormat: "dd-mm-yy",
    minDate: 1,
    showAnim: "slideDown"
   });
  });
 });
</script>

顺便说一句，我是否正确地从将包含的文件 (testSearch.php) 中省略了 doctype/head/body 标记？我认为它们不是必需的，因为 testResult.php 已经有这些标签，而 testSearch.php 只会被注入其中。

【问题讨论】：

向我们展示您的php 代码，尤其是include
虽然有很多代码，我应该展示什么具体的东西？不想全部发送垃圾邮件！
两个页面都有在 document.ready 上运行的 jQuery，这是个问题吗？
如果你可以看看@Madhu，我已经添加了包含和主页中的 php 代码？

标签： php jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

尝试使用

jQuery(function($){ 
    $('body').on('focus',"#yourTagId", function(){ $(document).ready(function() {
        $('#yourTagId').datepicker({ dateFormat: 'dd-mm-yy' });});
    });
});

【讨论】：

我可以让我的页面工作的唯一方法是在 testSearch.php 中初始化 testResult.php 中使用的日期选择器。不知道问题出在哪里，这不是我理想的解决方案，但必须这样做