Fancybox中的自定义复选框

Question

我试图在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？

Answer 1

My question is how to have custom checkboxes within Fancybox 

的问题的答案是“是”，就可以拥有的fancybox内定制复选框（如何-继续阅读;？）

关于使用.live()“打开多个fancyboxes fancybox“，最好使用.on()来代替（它需要jQuery 1.7+）。我猜想使用.live()（自jQuery 1.7开始已弃用）和.click()用于动态添加要在fancybox中打开的DOM的元素。

“你不能从打开的fancybox的fancybox，除非你使用.live()”不一定是真实的，但是对于具有的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?其中还包含演示。

还要注意，我包括onCleanup选项与jQuery的.unwrap()方法。由于我们使用“内联”内容，修复了这个问题this bug