触发 jQuery 分页后 Lightbox 不再工作(jQuery 和 lightbox 冲突)
我们同时使用两个脚本: prettyPhoto< /a> 和 jQuery 分页。当页面首次加载时,两个脚本都在工作。但是,当我单击分页的第 2 页时,灯箱不再显示,但我仍然可以从一页转到下一页。这些是两者的初始化脚本:
jQuery Pagination:
<script type="text/javascript">
// This is a very simple demo that shows how a range of elements can
// be paginated.
// The elements that will be displayed are in a hidden DIV and are
// cloned for display. The elements are static, there are no Ajax
// calls involved.
/**
* Callback function that displays the content.
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int} page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq){
var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}
/**
* Initialisation function for pagination
*/
function initPagination() {
// count entries inside the hidden content
var num_entries = jQuery('#hiddenresult div.result').length;
// Create content inside pagination element
$("#Pagination").pagination(num_entries, {
callback: pageselectCallback,
items_per_page:1 // Show only one item per page
});
}
// When document is ready, initialize pagination
$(document).ready(function(){
initPagination();
});
</script>
prettyPhoto:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
有人知道冲突在哪里吗?谢谢。
We are using two scripts at the same time: prettyPhoto and jQuery pagination. When the page first loads, both of the scripts are working. However, when I click on Page 2 of the pagination, the lightbox no longer shows but I can still go from one page to the next. These are the initialization scripts for both:
jQuery Pagination:
<script type="text/javascript">
// This is a very simple demo that shows how a range of elements can
// be paginated.
// The elements that will be displayed are in a hidden DIV and are
// cloned for display. The elements are static, there are no Ajax
// calls involved.
/**
* Callback function that displays the content.
*
* Gets called every time the user clicks on a pagination link.
*
* @param {int} page_index New Page index
* @param {jQuery} jq the container with the pagination links as a jQuery object
*/
function pageselectCallback(page_index, jq){
var new_content = jQuery('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}
/**
* Initialisation function for pagination
*/
function initPagination() {
// count entries inside the hidden content
var num_entries = jQuery('#hiddenresult div.result').length;
// Create content inside pagination element
$("#Pagination").pagination(num_entries, {
callback: pageselectCallback,
items_per_page:1 // Show only one item per page
});
}
// When document is ready, initialize pagination
$(document).ready(function(){
initPagination();
});
</script>
prettyPhoto:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Anyone knows where the conflict lies? Thanks.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
我找到了问题的解决方案(我在另一个论坛上找到了):
我只需要插入 $("a[rel^='prettyPhoto']").prettyPhoto();在函数 pageselectCallback 中,如下所示:
如果我只能给回答它的人 +1 这里。 :)
I found a solution to my problem (which I found on another forum):
I just need to insert $("a[rel^='prettyPhoto']").prettyPhoto(); inside the function pageselectCallback like so:
If I could only give +1 to the guy who answered it here. :)
尝试使用 Jquery .delegate()
try using Jquery .delegate()