jQuery對話框-僅在單擊“ X”按鈕時執行代碼

Question

我有一個帶有兩個按鈕的對話框（是-否）。 每個觸發一個功能

$('#divDialog').dialog({
    modal:true,
    width:450,
    resizable: false,          
    buttons: [{
        text: 'Yes',
        click: function () {
            /*Do stuff when clicking yes*/
        }},{
            text: 'No',                
            click: function () {
                /*Do stuff when clicking no*/
            }}],
    close: function(ev, ui){
        /*Do stuff always when closing*/                 
    }
});

我想做的是，單擊頂部的“ X”按鈕時，執行與“否”按鈕相同的代碼。 所以我將代碼放在“關閉”功能中。 但是，當單擊“是”時，代碼也會執行。

單擊“ X”時如何執行該代碼，但單擊“是”時如何執行？

謝謝。

Answer 1

定義一個函數，並在用戶單擊“是”或關閉對話框時調用它。

 $('#divDialog').dialog({
          modal:true,
          width:450,
          resizable: false,          
          buttons: [{
                text: 'Yes',
                click: function () {
                    /*Do stuff when clicking yes*/
                    do_work();
                }},{
                text: 'No',                
                click: function () {
                    /*Do stuff when clicking no*/
          }}],
          close: function(ev, ui){
                     /*Do stuff always when closing*/                 
                    do_work();
                }
       });

function do_work() {
    ....
}

Answer 2

您可以通過在jQueryUI init之外聲明函數來做到這一點：

var onClick = function(ev, ui) {
    console.log(ev);
    if(ev.type == "click") {
        this.isYes = (ev.originalEvent.currentTarget.textContent == "Yes")
        $(this).dialog('close');
    } else {
        if(this.isYes){
            alert("Yes");
        } else {
            alert("No");
        }
    }
}

$('#divDialog').dialog({
    modal:true,
    width:450,
    resizable: false,          
    buttons: [{
        text: 'Yes',
        click: onClick
    },{
        text: 'No',                
        click: onClick
    }],
    close: onClick
});

jsFiddle

Answer 3

您需要做的就是定義一個函數，並在需要時調用它，如下所示。

演示@ 小提琴

function myFunction() {
    alert ("I am clicked");
}

$('#divDialog').dialog({
    modal:true,
    width:450,
    resizable: false,          
    buttons: [{
        text: 'Yes',
        click: function() {}
    }, {
        text: 'No',                
        click: myFunction
    }],
    close: myFunction
});