[英]How to use jQuery .live() with ajax
Currently I am using John Resig's LiveQuery plugin/function to allow users to sort through a long unordered-list of list-items. 目前我正在使用John Resig的LiveQuery插件/函数来允许用户对列表项的长无序列表进行排序。 The code is as follows:
$('input#q').liveUpdate('ul#teams').focus();
代码如下:
$('input#q').liveUpdate('ul#teams').focus();
The issue arises when I use ajaxified tabs to sort the lists. 当我使用ajaxified选项卡对列表进行排序时,会出现问题。 Essentially I use ajax to pull in different lists and the
liveUpdate()
function doesn't have access to the new li's. 基本上我使用ajax来引入不同的列表,而
liveUpdate()
函数无法访问新的li。
I assume I would need to bind this using the .live()
function . 我假设我需要使用
.live()
函数绑定它。 But I am unclear how to bind this to an ajax event, I've only used the "click" event. 但我不清楚如何将其绑定到ajax事件,我只使用了“click”事件。 How would I bind the new
liveUpdate()
to the newly loaded list-items? 如何将新的
liveUpdate()
绑定到新加载的列表项?
EDIT: The ajax tabs is run through the wordpress ajax api so the code is fairly complex, but simplified it is something like this: 编辑: ajax选项卡通过wordpress ajax api运行,所以代码相当复杂,但简化它是这样的:
$('div.item-list-tabs').click( function(event) {
var target = $(event.target).parent();
var data = {action, scope, pagination}; // Passes action to WP that loads my tab data
$.post( ajaxurl, data, function(response) {
$(target).fadeOut( 100, function() {
$(this).html(response);
$(this).fadeIn(100);
});
});
return false;
});
This is simplified for the sake of this conversation, but basically once the $.post
loads the response in place .liveUpdate()
doesn't have access to it. 这是为了这个对话而简化,但基本上一旦
$.post
加载了响应, .liveUpdate()
就无法访问它。 I believe the .live()
function is the answer to this problem, I'm just unclear on how to implement it with the $.post()
我相信
.live()
函数是这个问题的答案,我只是不清楚如何使用$.post()
实现它
As mentionned in the documentation of JQuery, .live() is considered deprecated. 正如在JQuery的文档中提到的那样,.live()被认为已被弃用。 You should use the method .on() instead.
您应该使用方法.on()代替。
$("#yourSelector").on("click", function() {
// statement
});
To also manage futur object of the selector type, you can use .on() like this 要管理选择器类型的futur对象,可以像这样使用.on()
$(document).on("click", "#yourSelector", function() {
// statement
});
I also got trouble with using just 我也很难使用
$('selector').click(function(..
after an Ajax call, and finally found that we need to use 经过Ajax调用后,终于发现我们需要使用了
$('selector').live("click", function(){..
or the new method 或新方法
$(document).on('click', 'selector', function(){..
to bind the event for new elements created after an Ajax call. 绑定Ajax调用后创建的新元素的事件。
$(document).on('click','selector', function(event){
//your code
});
For live 为了生活
$('selector').live('click', function(event){
//your code
});
Try using jQuery's Ajax Events 尝试使用jQuery的Ajax事件
$('input#q').ajaxComplete(function(){
$(this).liveUpdate('ul#teams').focus();
$(this).unbind('ajaxStop');
});
$('input#q').live(function() {
$(this).liveUpdate('ul#teams').focus();
});
$("div.item-list-tabs").live("click",function(){
//statements..
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.