jQuery 对话框中的按钮如何设置点击事件？

Question

好的，我得到了这段代码：

    $(document).ready(
    function() {
        $(".dialogDiv").dialog({
            autoOpen: false,
            modal: true,
            position: [50, 50],
            buttons: {
                "Print page": function() {
                    alert("Print");
                },
                "Cancel": function() {
                    $(this).dialog("close");
                }
            }
        }
        );
    $('.ui-dialog-buttonpane button:contains("Print page")').attr("id", "dialog_print-button");
    $(".dialogDiv").parent().appendTo($('form'));
    }

如何为点击事件指定或设置新的函数？

$("#dialog_print-button"). ???

编辑，这样做可以：

$("#dialog_print-button").unbind("click").click(
function () {
   alert("new function that overide the old ones")
}
)

我尝试在jQuery文档中找到相关内容，但是我认为在文档中很难找到。特别是对于刚接触JavaScript和jQuery库的人来说。

编辑，获取帮助的快速方法是访问jQuery irc频道 :D

- The Demz

---

为什么你最初不想使用 right 函数？ - Igor Dymov

Answer 1

我认为这会有所帮助：

$(".dialogDiv").dialog("option", "buttons", {
    "Print page": function() { /* new action */ },
    "Cancel": function() { $(this).dialog("close"); }
});

因为 buttons 属性设置了所有按钮，所以您必须包含 cancel 按钮处理程序。

- Igor Dymov

---

这是一个老问题，但这只是重申了OP发布的内容。 - Mark Schultheiss

Answer 2

$("#Print page").click(function () {
   ...
});

也许应该是这样：

$("#dialog_print-button").click(function () {
   ...
});

- Mati

---

$("#dialog_print-button").click(function () { alert("New Print Function") }); - The Demz

Answer 3

jQuery UI对话框现在原生支持“id”属性。

    $("#dialog-form").dialog({
        autoOpen: false,
        height: "auto",
        width: 300,
        buttons:
        [
            {
                text: "Create Revision",
                id: "btnCreateRev",
                click: function () {
                    //code for creating a revision
                }
            },
            {
                text: "Cancel",
                id: "btnCancel",
                click: function () { $(this).dialog("close"); },
            }
        ]
    });

- Jacob Stamm

Answer 4

你把代码放在按钮部分：

 ...
 buttons: {                   
         "Print page": function() {                       
          //here you execute the code or call external functions as needed 
          }

一旦您在对话框上单击按钮，该代码将自动调用。 因此，您可以直接插入实现逻辑的代码。

- Francesco