jQuery 小部件无法在 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 和 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."
            );
        });
    }
});

Answer 1

不要使用 click，而是使用 focus，这样日期选择器就可以工作了。假设元素id是有效的并且是一个input

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

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

DEMO

Answer 2

我建议您在 Ajax 内容加载后设置 datepicker()，不要使用点击事件。因为$('#dateOfBirth').datepicker()的initial call是设置datepicker，所以可能需要再次点击才能触发日历。

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

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

Answer 3

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

两个答案都成功。 Kieran 立即开始工作，因为它是手动触发事件。

查理也成功了 - 但只是在我点击了几次之后。

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

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

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

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

jQuery 小部件无法在 Ajax 加载的选项卡上运行

jQuery Widgets not working on tabs loaded by Ajax

javascript

jquery

jquery-ui

jquery-events