javascript - jQuery Widgets 无法在 Ajax 加载的选项卡上运行

Question

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

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

我尝试使用:

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

但是日期选择器不显示。

令人困惑(对我来说):

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

工作正常!当“单击”日期字段时会显示警报。当然，如果我有一个没有选项卡/ajax 内容的简单页面 - 单击日期字段时，日期选择器将按预期显示。

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

View 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."
            );
        });
    }
});

Answer 1

不要使用click，而是使用focus，并且日期选择器将起作用。假设元素 id 有效并且是输入

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

对于选项卡内的任何其他插件，您可以使用选项卡的 load 回调...请参阅 api 文档

DEMO