Fancybox 中的自定义复选框答案

【问题标题】：Custom checkbox within FancyboxFancybox 中的自定义复选框
【发布时间】：2012-06-14 21:07:31
【问题描述】：

我正在尝试在 Fancybox 中使用自定义复选框。它们出现但不起作用（无法检查）。

$(document).ready(function() {

    $("#fnc").live("click", function(){
        $.fancybox($("#hidediv").html(),{
          'speedIn'         : 600, 
          'speedOut'            : 200, 
          'overlayShow'     : false,
          'autoDimensions'  : false,
          'width'           : 620,
          'height'          : 'auto',
          'overlayShow'       : true,
          'overlayOpacity'    : 0.8,
          'overlayColor'      : '#ccc'

          });
$('.defaultP input').ezMark();
$('.customP input[type="checkbox"]').ezMark({checkboxCls: 'ez-checkbox-green', checkedCls: 'ez-checked-green'});
        }); 
});

有没有办法在 Fancybox 加载后再次触发 jQuery？

【问题讨论】：

你有什么理由使用.live()吗？因为您的目标是一个隐藏的 DIV，它可以使用常规的 fancybox 脚本作为内联内容。
原因是一旦用户在第一个 Fancybox 中进行选择，就会打开另一个 Fancybox。除非您使用 .live，否则您无法从 fancybox 打开 Fancybox
有点不同意，检查stackoverflow.com/a/10694032/1055987和/或stackoverflow.com/a/10973966/1055987
是的，我已经检查过了。 :) 使用 fancy1 和 fancy2 你只针对 2 个幻想。如果您有 300 多个产品，并且每个产品都想在 fancybox 中打开，并且如果该产品中有其他产品，您将无法定位它们。想象一下，您单击产品并单击其中的相关产品，并且该相关产品也获得了相关产品 :) :) 我的问题是如何在 Fancybox 中使用自定义复选框。定制还是不定制，这是个问题！

标签： jquery fancybox checkbox

【解决方案1】：

My question is how to have custom checkboxes within Fancybox

该问题的答案是“是”，可以在 fancybox 中使用自定义复选框（操作方法？继续阅读；）

关于使用.live()“从fancybox打开多个fancybox”，最好使用.on()代替（虽然它需要jQuery 1.7+）。我猜.live()（从 jQuery 1.7 起已弃用）和.click() 的使用旨在动态添加元素到 DOM 以在 fancybox 中打开。

“除非您使用 .live()，否则您无法从 fancybox 打开 Fancybox” 不一定正确，但是为了在 fancybox (v1.3.4) 中打开当前和/或动态添加的元素，在这个演示中，我们将使用.on() 和一个普通的fancybox $(".selector").fancybox(); 脚本（没有.click()）

这应该可以解决问题

$(document).ready(function() {
 $("body").on("focusin", function(){
  $("a.fancybox").fancybox({
   'speedIn': 600, 
   'speedOut': 200, 
   'overlayShow': false,
   'autoDimensions': false,
   'width': 620,
   'height': 'auto',
   'overlayShow': true,
   'overlayOpacity': 0.8,
   'overlayColor': '#ccc',
   'onCleanup': function() {
    var myContent = this.href;
    $(myContent).unwrap();
   }
  }); // fancybox
 }); // on
 $('.defaultP input').ezMark();
 $('.customP input[type="checkbox"]').ezMark({checkboxCls: 'ez-checkbox-green', checkedCls: 'ez-checked-green'});
}); // ready

不要相信我，看看它是否有效HERE。在那个 DEMO 中，您还可以从 fancybox 中打开另一个 fancybox。

有关将focusin 用作.on() 事件的更多信息，请查看how to bind fancybox to dynamic added element?，其中还包含一个演示。

还请注意，我在 jQuery .unwrap() 方法中包含了 onCleanup 选项。由于我们使用的是“inline”内容，因此修复了this bug

【讨论】：

完美！非常感谢您为我指明了正确的方向。不幸的是，我将不得不将它用于我的下一个项目，因为我的客户使用的是旧 jQuery，并且无法更新新的（并且不想做无冲突）:)
noConflict 与升级您的 jQuery 版本完全无关，如果您将 jQuery 与其他库（如 mootools 或原型）一起使用，则使用它。此外，您的文档中不需要多个 jQuery 实例。如果您的客户使用的是旧版本，则只需将其替换为新版本即可。他们当前的功能将继续运行，而您将有机会添加新功能，例如 .on()。