[英]jQuery Widgets not working on tabs loaded by Ajax
I have an application that has many tabs, apart from the first tab - all others are loaded via Ajax. 我有一个应用程序,除了第一个选项卡外,它还有许多选项卡-所有其他选项都是通过Ajax加载的。
The tab content all loads correctly. 标签内容全部正确加载。 However if I have a jQuery widget in a (ajax loaded) tab, the widget does not work.
但是,如果我在(加载了ajax)选项卡中有一个jQuery小部件,则该小部件不起作用。
I attempted to use; 我尝试使用;
$(document).on('click', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
But the datepicker does not display. 但是不会显示日期选择器。
Confusingly (for me), 令人困惑的(对我而言)
$(document).on('click', '#dateOfBirth', function() {
alert('This works properly');
});
Works properly! 正常工作! The alert displays when the date field is "clicked".
当日期字段被“单击”时,将显示警报。 And of course if I have a simple page without the tabs / ajax content - the datepicker displays as expected when the date field is clicked.
当然,如果我有一个没有标签/ ajax内容的简单页面,则单击日期字段时,日期选择器将按预期显示。
I am using the jQuery 2.2.0 and jQuery UI 1.12.0 with the "redmond" theme / CSS. 我正在使用带有“ redmond”主题/ CSS的jQuery 2.2.0和jQuery UI 1.12.0。
The view html follows the following; 视图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>
...
...
Here is the JS used for the TABS; 这是用于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."
);
});
}
});
As always thanks for anything you might suggest. 一如既往地感谢您可能提出的任何建议。 -Gavin.
加文
Instead of using click
use focus
and datepicker will work . 代替使用
click
使用focus
和datepicker。 Assumes that the element id is valid and is an input 假设元素ID有效并且是输入
$(document).on('focus', '#dateOfBirth', function() {
$( '#dateOfBirth' ).datepicker();
});
For any other plugins inside tabs you can use load
callback of tabs ... see api docs 对于标签内的任何其他插件,您可以使用标签的
load
回调...请参阅api文档
I will suggest you to setup the datepicker()
after Ajax content loaded, do not use click event. 我建议您在加载Ajax内容后设置
datepicker()
,不要使用click事件。 Because the initiate call of $('#dateOfBirth').datepicker()
is to set up the datepicker, you may need to click again to trigger the calendar. 因为
$('#dateOfBirth').datepicker()
调用是为了设置日期选择器,所以您可能需要再次单击以触发日历。
Or, you can try to manually trigger it right after set. 或者,您可以尝试在设置后立即手动触发它。
$(document).on('click', '#dateOfBirth', function() {
$(this).datepicker();
$(this).datepicker("show");
});
Firstly, thanks very much for the answers / comments. 首先,非常感谢您的回答/评论。
Both answers work successfully. 这两个答案均成功运行。 Kieran's worked straight away as it was manually triggering the event.
Kieran的工作是立即触发事件,因此立即进行了工作。
Charlie's worked, too - but only after I clicked several times. 查理(Charlie)也工作过-但只有在我单击了几次之后,才起作用。
Though after fixing my underlying issue, Charlie's worked straight away, too. 尽管在解决了我的基本问题之后,查理的工作也很快完成。
The underlying issue was indeed a duplicate ID. 根本的问题确实是重复的ID。 (thanks for the prompt to check, Charlie).
(感谢您检查提示,查理)。
Because the TAB contents are their own individual forms / pages - I only ever worried about making ID's unique within individual TABs. 因为TAB的内容是他们自己的单独的表单/页面-我只担心在单独的TAB中使ID唯一。
After ensuring that ALL IDs are unique, the widget works correctly / as expected. 在确保所有ID都是唯一的之后,小部件可以正常/按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.