使用Ajax时jQuery出现的奇怪问题
使用Ajax时jQuery出现的奇怪问题
提问于 2010-08-29 00:18:33
我正在使用jQuery/PHP/MySql在页面上加载twitter搜索结果，但仅限于前20个搜索结果。
当用户滚动页面并点击页面底部时，会加载并显示另外20个结果。
我已经实现了一个投票系统，所以这些特定的推文可以投票通过和反对。
但是，当加载滚动结果时，此功能将不再适用于ajax加载的结果，但会继续适用于前20个结果。
以下是在滚动中获取新结果的jQuery：
j(window).scroll(function(){
if (j(window).scrollTop() == j(document).height() - j(window).height()){
j.ajax({
url: "older.php?oldest="+oldestName+"",
cache: false,
success: function(html){
j(".older").html(html);
j('.tweets ul li').removeClass( 'last_item' );
j('.older ul > *').clone().hide().appendTo('.tweets ul').slideDown();
}
})
}
}); 和设置投票的jQuery：
$("a.vote_up").click(function(){
//get the id
the_id = $(this).attr('id');
// show the spinner
$(this).parent().html("<img src='images/spinner.gif'/>");
//fadeout the vote-count
$("span#votes_count"+the_id).fadeOut("fast");
//the main ajax request
$.ajax({
type: "POST",
data: "action=vote_up&id="+$(this).attr("id"),
url: "vote.php",
success: function(msg) {
$("span#votes_count"+the_id).html(msg);
//fadein the vote count
$("span#votes_count"+the_id).fadeIn();
//remove the spinner
$("span#vote_buttons"+the_id).remove();
}
});
});HTML标记：
<li id='1283009589'>
<a class='imglink' target='_blank' href='link'>
<img src='link'alt='howtomoodle' title='howtomoodle' />
</a>
<a class='userlink' target='_blank' href='http://twitter.com/jim' alt='jim' title='jim'>jim</a>
Screenpresso - free screen capture software http://post.ly/uFxt #moodle || 28-08-2010 16:33
<span class='votes_count' id='votes_count22361731118'>Votes:0</span>
<span class='vote_buttons' id='vote_buttons22361731118'>
<a href='javascript:;' class='vote_up' id='22361731118'></a>
<a href='javascript:;' class='vote_down' id='22361731118'></a>
</span>
</li>有没有人知道为什么旧的结果会被加载，他们不允许点击voteup和votedown按钮，或者至少.click事件不工作。
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-08-29 00:53:48
.delegate()是使用.live()的一个很好的替代方法，它放在动态元素的父容器上时效率更高。
$('#theContainer').delegate("a.vote_up", "click", function() {
//get the id
the_id = $(this).attr('id');
// show the spinner
$(this).parent().html("<img src='images/spinner.gif'/>");
//fadeout the vote-count
$("span#votes_count"+the_id).fadeOut("fast");
//the main ajax request
$.ajax({
type: "POST",
data: "action=vote_up&id="+$(this).attr("id"),
url: "vote.php",
success: function(msg) {
$("span#votes_count"+the_id).html(msg);
//fadein the vote count
$("span#votes_count"+the_id).fadeIn();
//remove the spinner
$("span#vote_buttons"+the_id).remove();
}
});
}
);(需要jQuery 1.4或更高版本。)
Stack Overflow用户
发布于 2010-08-29 00:22:19
这是因为"a.vote“的"click”事件在站点加载时被绑定一次。加载新内容(下20个结果)时，不会调用$(document).ready。看看$.live方法http://api.jquery.com/live/，这正是您需要的:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/3591469
复制相关文章
相似问题
腾讯云开发者
