Question

我有一个包含许多选项卡的应用程序，除了第一个选项卡外 - 所有其他选项卡都是通过Ajax加载的。

标签内容全部正确加载。但是，如果我在（ajax加载）选项卡中有一个jQuery小部件，则该小部件不起作用。

我试图使用;

$(document).on('click', '#dateOfBirth', function() {
    $( '#dateOfBirth' ).datepicker();
});

但是日期选择器不会显示。

令人困惑（对我来说），

$(document).on('click', '#dateOfBirth', function() {
    alert('This works properly');
});

正常工作！ “点击”日期字段时会显示警报。当然，如果我有一个没有tabs / ajax内容的简单页面 - 当点击日期字段时，datepicker会按预期显示。

我正在使用jQuery 2.2.0和 jQuery UI 1.12.0，带有“redmond”主题/ CSS。

视图html遵循以下内容;

<div class = "emr-bodycontent">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Patient Details</a></li>
      <li><a href="@emr.controllers.pas.routes.CarerDetails.carerDetails()">Carers</a></li>
...
...

这是用于TABS的JS;

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.jqXHR.fail(function() {
            ui.panel.html(
                "There seems to be an error retrieving the data you requested."
            );
        });
    }
});

一如既往地感谢您的建议。 -Gavin。

Answer 1

而不是使用click使用focus和datepicker将起作用。假设元素id有效并且是输入

$(document).on('focus', '#dateOfBirth', function() {
    $( '#dateOfBirth' ).datepicker();
});

对于标签内的任何其他插件，您可以使用load标签回调...请参阅api docs

的 DEMO

Answer 2

我建议您在加载Ajax内容后设置$('#dateOfBirth').datepicker()，不要使用click事件。由于$(document).on('click', '#dateOfBirth', function() { $(this).datepicker(); $(this).datepicker("show"); });的初始调用是设置日期选择器，因此您可能需要再次单击以触发日历。

或者，您可以尝试在设置后立即手动触发它。

{{1}}

Answer 3

首先，非常感谢答案/评论。

两个答案都能成功运作。 Kieran直接工作，因为它是手动触发事件。

查理的工作也是如此 - 但只是在我点击了好几次之后。

虽然在解决了我的根本问题之后，查理也立即开始工作。

根本问题确实是重复ID。 （感谢提示检查，查理）。

因为TAB内容是他们自己的个人形式/页面 - 我只担心在个别TAB中使ID成为唯一。

确保所有ID都是唯一的后，窗口小部件正常/按预期工作。

jQuery Widgets无法处理Ajax加载的选项卡

3 个答案: