jquery - 花式框的 jQuery 验证引擎失败

Question

我有一个带有 2 个不可见 DIV 的表单，一旦单击一个按钮，就会显示该 DIV，它会弹出 fancybox 窗口。我有 jQuery 验证器引擎插件，它完成了所有的验证工作。问题是验证引擎对普通字段工作正常，但对花式框窗口内的隐藏字段不工作，一旦它们可见。我怀疑这是因为 fancybox 在运行时将它们放在<form/>导致验证引擎失败的范围之外，因为它不能在表单标记之外的元素上工作。

$(document).ready(function() {  
  $("#category").validationEngine('validate');
  $('#wrapper #addCat').live('click', function() {
  $('<a href="#addCategoryDiv"/>').fancybox({
    'autoDimensions' : false,
    'hideOnContentClick' : false,
    'height' : 450,
    'width' : 500,
    'scrolling' : 'no'
    }).click();
  });
  $('#wrapper #editCat').live('click', function() {
    $('<a href="#editCategory"/>').fancybox({
      'autoDimensions' : false,
      'hideOnContentClick' : false,
      'height' : 450,
      'width' : 500,
      'scrolling' : 'no'
      }).click();
  });
});

有人可以帮我解决这个问题吗？我可以在 Firebug 中看到，fancybox在标签<div style="display:none">之外制作了部分代码<form></form>。

Answer 1

您需要将您的验证引擎初始化代码放在 fancyboxonComplete方法中：

$('<a href="#editCategory"/>').fancybox({
                'autoDimensions'        : false,    
                'hideOnContentClick'    : false,
                'height'                : 450,
                'width'                 : 500,
                'scrolling'             : 'no'
                'onComplete'            : function(){
                                              $("#category").validationEngine('validate');   
                                          }
            }).click();