[英]JQuery UI Tabs - rebinding events for tabs loaded via ajax
Is there a proper way to rebind events in JQuery UI when tabs are loaded via ajax.当通过 ajax 加载选项卡时,是否有适当的方法来重新绑定 JQuery UI 中的事件。 For example, in the code below, I have the success event call an 'initBinding()' function which sets up some custom click event handlers for different classes.
例如,在下面的代码中,我有一个成功事件调用“initBinding()”function,它为不同的类设置了一些自定义点击事件处理程序。 The problem with this is, when I switch tabs a bunch of times, then fire off one of the click events, I get some weird screen flicker effects.
这样做的问题是,当我多次切换选项卡,然后触发其中一个点击事件时,我会得到一些奇怪的屏幕闪烁效果。 If I refresh the entire page, then go directly to the click event, it doesn't flicker.
如果我刷新整个页面,那么 go 直接到点击事件,就不闪烁了。 So I think it has something to do with it binding multiple times.
所以我认为这与它绑定多次有关。
If I take the 'initBinding()' method out of the success event, any tab that gets loaded via ajax will not trigger any of the events I have setup.如果我从成功事件中取出“initBinding()”方法,则通过 ajax 加载的任何选项卡都不会触发我设置的任何事件。 Is there a standard/better way to do handling binding events like this?
有没有标准/更好的方法来处理这样的绑定事件?
$(document).ready(function () {
$("#tabs").tabs({
select: function (event, ui) {
var tabID = "#ui-tabs-" + (ui.index + 1);
$(tabID).html("<b>Fetching Data....Please wait....</b>");
},
ajaxOptions: {
error: function (xhr, status, index, anchor) {
$(anchor.hash).html("Could not load tab data");
},
success: function (xhr, status, index, anchor) {
initBinding();
}
}
});
});
function initBinding() {
$(".editButton").click(function () {
//event logic...
});
}
You should use jQuery's .live() to你应该使用 jQuery 的.live()来
Attach a handler to the event for all elements which match the current selector, now and in the future.
将处理程序附加到与当前选择器匹配的所有元素的事件,现在和将来。
In your code:在您的代码中:
$(".editButton").click(function () {
will become会变成
$(".editButton").live('click', function () {
Using this technique, you can remove the initBinding()
function altogether, and use the .live()
statement in the onready function.使用此技术,您可以完全删除
initBinding()
function,并在 onready function 中使用.live()
语句。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.