设置 jQuery UI 对话框按钮 ID？答案

【问题标题】：Set jQuery UI dialog button id?设置 jQuery UI 对话框按钮 ID？
【发布时间】：2012-04-25 09:26:18
【问题描述】：

是否可以为 jQuery UI 对话框中的按钮设置 ID，以便以后可以通过 jQuery 引用它们？比如触发事件、禁用等？

... in the dialog setup ...
buttons: {               
    "Sök": function () {
        var bValid = true;
    },
    "OK": function () {
        if (OK()) {
            getStuffNoteringar($("#txtStuffId").val());
            $(this).dialog("close");
        }
    }

.... later on in some javascript code....

$('#OK').click();

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

$("#myDialog").dialog({
  buttons :  { 
     "MyButton" : {
         text: "OK",
         id: "okbtnid",
         click: function(){
             var bValid = true;
         }   
      } 
   }
});

【讨论】：

Nice 不知道这会起作用，因为没有记录，但确实如此。
documentation 没有谈到 id 但它有文字并点击 :)
是的，但两者都不是属性，所以我认为设置属性不起作用。很高兴了解这个未记录的功能。文档中缺少的总是最好知道的:)

【解决方案2】：

或者你可以把它作为一个数组来做：

$("#myDialog").dialog({
   buttons :  [{ 
     text: "OK",
     id: "ok",
     click: function(){
         alert("clicked");
     }   
   }]
});

http://docs.jquery.com/UI/Dialog

【讨论】：

【解决方案3】：

不是通过您想要的方式，因为 API 不提供这些选项，但是如果您查看对话框生成的标记，您应该能够获取您需要的任何元素并根据需要绑定它们或添加 id他们。这是文档页面 (http://jqueryui.com/demos/dialog/) 中的标记

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
      <p>Dialog content goes here.</p>
   </div>
</div>

如果它是模态内容中的按钮，那么您可以在模态元素上下文中进行 CSS 查询并以这种方式访问它们。

【讨论】：