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

Answer 1

Я думаю, что это поможет:

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

Поскольку свойство buttons устанавливает все кнопки, необходимо включить обработчик кнопок cancel.

Answer 2

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

Или, может быть, это должно быть

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

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"); },
            }
        ]
    });

Answer 4

Вы помещаете код в область кнопок:

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

Когда вы нажимаете кнопку в диалоге, этот код вызывается автоматически. Поэтому вы вставляете туда непосредственно код, который реализует вашу логику.