2010-12-16 49 views
0

我正在使用jQuery UI 1.8.7(在jQuery UI站点上创建的只包含对话框小部件的自定义构建)。为什么jQuery验证clobber jQuery UI?

我也使用jQuery Validate 1.6插件(或者更确切地说)。

我的jQuery UI的标记/代码是很库存的东西:

<div id="create-snapshot" title="Create new snapshot?"> 
    <p style="text-align:left"> 
    <span>Name: <input id="snapshotName" name="snapshotName" /></span><br /><br /> 
     <b>Snapshot type:</b><br /><br /> 
     <input type="radio" id="snapshotType" 
       name="snapshotType" value="0" 
       checked="checked" />Snapshot just the disks.<br /> 
     <input type="radio" id="snapshotType" 
       name="snapshotType" value="1" />Snapshot both disks and memory. 
    </p> 
</div> 

$("#create-snapshot").dialog({ 
    autoOpen: false, 
    resizable: false, 
    width: 500, 
    height: 250, 
    modal: true, 
    buttons: { 
    "Create": function() { 
     // ...do ajaxy stuff... 
     $(this).dialog("close"); 
    }, 
    "Cancel": function() { 
     $(this).dialog("close"); 
    } 
    } 
}); 

// Hook up <a href="#" id="create">Create Snapshot</a> 
$("body").delegate("a[id='create']", "click", 
    function() { 
    $("#create-snapshot").dialog('open'); 
    return false; 
    } 
); 

<script>标记的顺序是:

 
jquery-1.4.4.min.js 
jquery-ui-1.8.7.custom.min.js"> 
jquery.validate.min.js 

什么我发现是,当我包括jquery.validate.min.js它杀死Create Snapshot事件处理程序。如果我删除它,jQuery模态对话就会打开。

我检查了Firebug/Chrome开发工具的错误,但没有任何内容跳出。

为什么会发生这种情况?

+0

以及会发生什么,如果你反转两个? – jcolebrand 2010-12-16 21:15:28

+0

@drach - 试过了,它没有任何区别。 – Kev 2010-12-16 21:43:22

+0

是的,我想的很多。 idk,在我阅读之前我没有想法:S ...听起来像一个棘手的错误。 – jcolebrand 2010-12-16 21:44:29

回答

1

UPDATE: 有一个快速浏览一下1.6版本,它与jQuery库的新版本(使用相同的方法名)一个已知的bug,请this link。你必须升级你的验证插件


你试过更新验证插件吗?我猜你正在使用旧版本的this plugin

此代码执行我的机器上就好了(与验证1.7):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" type="text/css" href="../../css/smoothness/jquery-ui-1.8.7.custom.css"> 
     <script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script> 
     <script type="text/javascript" src="../../js/jquery-ui-1.8.7.custom.min.js"></script> 
     <script type="text/javascript" src="../../js/jquery.validate.min.js"></script> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $("#create-snapshot").dialog({ 
        autoOpen: false, 
        resizable: false, 
        width: 500, 
        height: 250, 
        modal: true, 
        buttons: { 
         "Create": function() { 
          // ...do ajaxy stuff... 
          $(this).dialog("close"); 
         }, 
         "Cancel": function() { 
          $(this).dialog("close"); 
         } 
        } 
       }); 

       // Hook up <a href="#" id="create">Create Snapshot</a> 
       $("body").delegate("a[id='create']", "click", function() { 
        $("#create-snapshot").dialog('open'); 
        return false; 
       }); 

      }); 
     </script> 
    </head> 
    <body> 
     <a href="#" id="create">Create Snapshot</a> 
     <div id="create-snapshot" title="Create new snapshot?"> 
      <p style="text-align:left"> 
       <span>Name: <input id="snapshotName" name="snapshotName" /></span><br /><br /> 
       <b>Snapshot type:</b><br /><br /> 
       <input type="radio" id="snapshotType" 
         name="snapshotType" value="0" 
         checked="checked" />Snapshot just the disks.<br /> 
       <input type="radio" id="snapshotType" 
         name="snapshotType" value="1" />Snapshot both disks and memory. 
      </p> 
     </div> 

    </body> 
</html> 
+0

谢谢ifaour - 那是一种享受。 – Kev 2010-12-16 22:35:41