jQuery Widget在Ajax加载的选项卡上不起作用

Question

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

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

我尝试使用；

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

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

令人困惑的（对我而言）

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

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

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

视图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和datepicker。 假设元素ID有效并且是输入

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

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

演示

Answer 2

我建议您在加载Ajax内容后设置datepicker() ，不要使用click事件。 因为$('#dateOfBirth').datepicker()调用是为了设置日期选择器，所以您可能需要再次单击以触发日历。

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

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

Answer 3

首先，非常感谢您的回答/评论。

这两个答案均成功运行。 Kieran的工作是立即触发事件，因此立即进行了工作。

查理（Charlie）也工作过-但只有在我单击了几次之后，才起作用。

尽管在解决了我的基本问题之后，查理的工作也很快完成。

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

因为TAB的内容是他们自己的单独的表单/页面-我只担心在单独的TAB中使ID唯一。

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