花式框点击与元素绑定在 Yii CGridView 与 ajax 分页

Fancybox on click with element binding in Yii CGridView with ajax Pagination

本文关键字：Yii CGridView 分页 ajax 绑定 元素      更新时间：2023-09-26

我正在使用带有ajax分页的Yii CGridView，其中一列是图像或内联ajax内容的链接，我想使用FancyBox到列。

当我使用分页时，我失去了对新元素的绑定。

如果我尝试在元素单击上制作它，如果元素已经有如下所示的花哨框，我总是会收到错误 

$('a.fancy-img').live('click', function () {
     $(this).fancybox({});
      return false;
});

但是如果我在同一链接上单击两次，我总是会收到javascript错误。

您尝试两次初始化元素的 fancybox 的问题，因此您的 javascript 中断并且不起作用。

您可以将类或某些属性添加到已经具有 Fancybox init 的元素中，这样您就不会为相同的元素和您的 javascript 喙再次初始化它，如下所示：

$('a.fancy-img').live('click', function () {
            var El = $(this);
            $(this).fancybox({});
            if (!El.hasClass('fancy-box-init')) {
                El.addClass('fancy-box-init');
                El.trigger('click');
            }
            return false;
 });

尝试

Fancybox使用$(element).data()来存储其元素相关的配置。

因此，请检查if(!$(this).data().fancybox) -->如果没有数据，则表示没有注册花式盒子，则注册花式框

$('a.fancy-img').live('click', function () {
    if(!$(this).data().fancybox){ //or if(!$(this).data("fancybox"))
      $(this).fancybox({});
    }
      return false;
});

.live（） 被取消使用 .on（）

语法

$( elements ).on( events, selector, data, handler );
相关文章：