admin管理员组文章数量:1327082
I really hope someone can help with this problem. I have an ajax pagination script that works great on the first page but the click events will not work on any other pages from the paging.
This is how I have it setup:
jQuery script
<script type="text/javascript">
// prepare when the DOM is ready
$().ready(function() {
//popup div
$(".wsbutton_pop").click(function(e){
//getting height and width of the message box
var height = $('#popuup_div').height();
var width = $('#popuup_div').width();
//calculating offset for displaying popup message
leftVal=e.pageX-(width/2)+"px";
topVal=e.pageY-(height/2)+"px";
//show the popup message and hide with fading effect
$('#popuup_div').css({left:leftVal,top:topVal}).show();
$('#popuup_div').html("<img src='images/ajaximg.gif' border='0'>");
$.ajax({
type: "get",
url: $(this).attr("href"),
success: function(r){
$('#popuup_div').html("")
$('#popuup_div').prepend(r);
}
});
});
//close div on mouse click
$(".popup_msg").click(function(e){
$('#popuup_div').fadeOut();
});
});
</script>
That should popup a div with content from another page.
Now my link:
<a href=".php?content=1" class="wsbutton_pop">Load content</a>
That works great on the initial page but the problem now is when I click to visit page 2 which has the exact same link, the link doesn't work anymore.
As a note, my pages should load in a div with id="paging". The ajax paging itself works great, its just that any jquery click event on the resulting pages does not work. I think the problem may be that I need to rebind the script but I do not know how to acplish that.
Thanks for any help on this.
I really hope someone can help with this problem. I have an ajax pagination script that works great on the first page but the click events will not work on any other pages from the paging.
This is how I have it setup:
jQuery script
<script type="text/javascript">
// prepare when the DOM is ready
$().ready(function() {
//popup div
$(".wsbutton_pop").click(function(e){
//getting height and width of the message box
var height = $('#popuup_div').height();
var width = $('#popuup_div').width();
//calculating offset for displaying popup message
leftVal=e.pageX-(width/2)+"px";
topVal=e.pageY-(height/2)+"px";
//show the popup message and hide with fading effect
$('#popuup_div').css({left:leftVal,top:topVal}).show();
$('#popuup_div').html("<img src='images/ajaximg.gif' border='0'>");
$.ajax({
type: "get",
url: $(this).attr("href"),
success: function(r){
$('#popuup_div').html("")
$('#popuup_div').prepend(r);
}
});
});
//close div on mouse click
$(".popup_msg").click(function(e){
$('#popuup_div').fadeOut();
});
});
</script>
That should popup a div with content from another page.
Now my link:
<a href="http://mysite./file.php?content=1" class="wsbutton_pop">Load content</a>
That works great on the initial page but the problem now is when I click to visit page 2 which has the exact same link, the link doesn't work anymore.
As a note, my pages should load in a div with id="paging". The ajax paging itself works great, its just that any jquery click event on the resulting pages does not work. I think the problem may be that I need to rebind the script but I do not know how to acplish that.
Thanks for any help on this.
Share Improve this question asked Mar 27, 2009 at 17:20 markmark4 Answers
Reset to default 7I would guess you are overwriting the link with the pagination so the click event is no longer bound. If you are using jquery 1.3 you can use the live events to fix this.
$(".wsbutton_pop").live("click", function(e) { ...
Or if you're using an earlier version of jQuery you can just reattach the event handler when you get the new page data back.
You are correct about rebinding the script. The reason is that the elements on the page are getting recreated during the ajax postback.
If you are using jQuery 1.3 or higher you can use live events (for click) like this:
$(".wsbutton_pop").live("click", function(e){
...
});
Note that live events do not work with the following events: change, blur, focus, mouseenter, mouseleave, and submit.
If you are not using jQuery 1.3, or you need to use one of the events above, you should follow the advice in the following article to avoid memory leaks: Code-Project Article
By your description, it sounds like you are generating a new page with a .wsbutton_pop in it. If that's the case, you'll need to attach your onclick function to it. Your initial script is only run at first load, so the registration is only for the .wsbutton_pop's that exist at that time.
You are binding only the initial .wsbutton_pop elements. If those get removed, and new elements of class .wsbutton_pop get added they will not automatically recieve the click event handler you wired up the one time.
What you're looking for is
$(".wsbutton_pop").live("click", function(e) {...});
That will apply to all instances of .wsbutton_pop currently on page, and any that get created.
-=-=-=-=-=-=-=-=-=-
The other answers came in as I wrote this, I'd say if we get a mashup of Brian Fisher's post and Jimmie R. Houts's we'd have the best answer, and probably mentioning that only the elements that are currently in DOM receive the event handler when using $(..).click(...)
本文标签: javascriptClick event does not work after ajax pagingStack Overflow
版权声明:本文标题:javascript - Click event does not work after ajax paging - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742209728a2433484.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论