Datepicker 在 ajax 加载的 div 中不起作用答案

【问题标题】：Datepicker not working in div loaded by ajaxDatepicker 在 ajax 加载的 div 中不起作用
【发布时间】：2016-01-18 18:24:12
【问题描述】：

我有一个由 ajax 填充的 div。以这种方式完成时，不会调用日期选择器。我最初在包含页面的标题中加载了日期选择器，但已经在调用 div 内容的脚本中加载它，但再次没有运气。 Jquery 库在主页的页眉中调用。如果我在没有 ajax 的情况下加载页面，则没有问题，并且 datepicker 工作正常。

<li><a data-target="#halloffame" href="abscencerecords.php">Absence Records</a></li>
<li><a data-target="#halloffame" href="abscencerequestform.php">Absence Request</a></li>
<li><a data-target="#halloffame" href="personaldetails.php">Personal Details</a></li>
        <?php endif ?>
        <?php endif ?>
        </ul></div>
        <div class="clear padding20"></div>
<div id="halloffame" class="bordered_box"></div>
        <script>
  $('[data-target]').click( function (e) {
   $(document).ready(function() { $("#datepicker").datepicker({ dateFormat: 'dd/mm/yy' }); }); 
   $(document).ready(function() { $(".datepickermultiple").multiDatesPicker({ dateFormat: 'dd/mm/yy' }); });
    var target = $($(this).attr('data-target')); 
   target.load($(this).attr('href'));
    e.preventDefault(); // prevent anchor from changing window.location
  });
</script>

【问题讨论】：

你的字段在哪里映射到datepicker？这段代码非常混乱。在这种日期选择器的情况下，您需要一个带有 id 的输入框，我强烈建议您重命名它。我实际上会将一个类名应用于任何需要日期选择器的输入文本并引用它。
请提供足够的代码以使示例实际运行。此外，您的 JS 代码不太有意义：为什么在 click 事件侦听器中有 $(document).ready() 调用？单击手动单击后，加载事件肯定不会被触发。
@StefanDochow 它可能是多余的，但不会伤害任何东西并且负载会触发。在页面加载后调用$(document).ready() 时，它会立即触发
很高兴知道，但是：为什么有它？如果你知道它是多余的，为什么还要保留它？
您必须在加载日期选择器后重新初始化日期选择器。检查这些问题：stackoverflow.com/questions/16772876/…

标签： javascript jquery ajax datepicker

【解决方案1】：

大多数插件只对存在的元素进行初始化......在代码运行时

为了在 ajax 加载的内容中初始化插件，您需要在 ajax 的完成回调中执行此操作。

尝试改变：

target.load($(this).attr('href'));

到

target.load($(this).attr('href'), function(){
    // new html now exists , initialize plugins or event handlers or dom manipulation here
    $(this).find(selector).somePlugin()
});

参考load() docs

【讨论】：

谢谢 - 我仍然是学习 javascript 的新手，这有助于我了解正在发生的事情，并在我尝试将其他 javascript 添加到被调用页面时帮助我。

【解决方案2】：

在我的情况下 datepicker 插件正在初始化，但问题是 datepicker 日历的位置，我通过在页面中添加下面的 CSS 来解决它：

#ui-datepicker-div {
    position: absolute !important;;
}

【讨论】：