jQuery 小部件不适用于 Ajax 加载的选项卡答案

【问题标题】：jQuery Widgets not working on tabs loaded by AjaxjQuery 小部件不适用于 Ajax 加载的选项卡
【发布时间】：2016-01-31 02:29:50
【问题描述】：

我有一个应用程序有很多选项卡，除了第一个选项卡 - 所有其他选项卡都是通过 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。

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

【问题讨论】：

这可能是因为日期选择器自己的代码。我唯一能想到的可能是日期选择器在页面加载时以某种方式使用现有的 DOM 元素初始化自己，所以如果你用 ajax 加载更多元素，它还不知道它们吗？
控制台日志有错误吗？？
向我们展示您的 ajax 加载代码。元素存在时需要初始化插件。因此，如果您加载新元素...意味着在 ajax 回调中进行新的初始化。 event delegation 是不同的......这就是为什么警报有效
我能猜到的唯一问题是，datepicker() 函数可能对您提供的信息有问题.....
还有什么是#dateOfBirth??是div，select，date，input吗？？

标签： javascript jquery jquery-ui jquery-events

【解决方案1】：

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

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

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

DEMO

【讨论】：

我也试过这个 - 只是为了我自己的学习 - 不幸的是，将其更改为点击焦点 - 在我的选项卡中不显示日期选择器小部件。
不知道该告诉你什么，因为我已经展示了它可以在加载 ajax 的情况下工作。可以检查标签load回调中是否存在元素。也可以在那里初始化
另外...您有该 ID 的重复项吗？如果是这样切换到使用类

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

Charlie 也有效 - 但只是在我点击了几次之后。

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

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

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

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

【讨论】：