Question

我有一个由ajax填充的div。以这种方式完成时，不会调用datepicker。我最初在包含页面的标题中加载了datepicker，但是在调用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>

Answer 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

Answer 2

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

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

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

2 个答案: