重新定义jQuery对话框按钮

Question

在我们的应用程序中，我们使用通用函数来创建包含特定于模块的内容的jQuery对话框。 自定义对话框包含3个按钮（取消，保存，应用）。 “应用”与“保存”相同，但也会关闭对话框。

许多模块仍在使用自定义帖子而不是ajax-post。 因此，我希望覆盖/重新定义特定对话框上的按钮。

到目前为止，我已经有了按钮，但是我无法对它们做任何事情。 是否可以从对话框中获取按钮（是的，我知道），但是可以对它们应用其他功能？

到目前为止，我的代码：

function OverrideDialogButtonCallbacks(sDialogInstance) {
  oButtons = $( '#dialog' ).dialog( 'option', 'buttons' );
  console.log(oButtons); // logs the buttons correctly

  if(sDialogInstance == 'TestInstance') {
    oButtons.Save = function() {
      alert('A new callback has been assigned.');
      // code for ajax-post will come here.
    }
  }
}

Answer 1

$('#dialog').dialog({
'buttons' : {
    'Save' : {
        id:"btn-save", // provide the id, if you want to apply a callback based on id selector
        click: function() {
           //
        },
    },
}
});

你有尝试过吗？ 根据需要覆盖按钮的回调。

Answer 2

完全不需要重新分配。 尝试这个。

function OverrideDialogButtonCallbacks(dialogSelector) {
    var button = $(dialogSelector + " ~ .ui-dialog-buttonpane")
                    .find("button:contains('Save')");

    button.unbind("click").on("click", function() {
        alert("save overriden!");
    });
}

像OverrideDialogButtonCallbacks("#dialog");一样调用它

工作提琴： http : //jsfiddle.net/codovations/yzfVT/

Answer 3

您可以使用$(..).dialog('option', 'buttons') 。 这将返回一个对象数组，然后可以通过搜索对象并调整click事件来重新连接对象：

// Rewire the callback for the first button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons[0].click = function() { alert('Click rewired!'); };

有关示例，请参见此提琴： http : //jsfiddle.net/z4TTH/2/

如有必要，可以使用button[i].text检查按钮的文本。

---

更新：

buttons选项可以是两种形式之一，一种是如上所述的数组，另一种是对象，其中每个属性都是按钮的名称。 要在这种情况下重新连接click事件，必须更新对话框中的buttons选项：

// Rewire the callback for the OK button
var buttons = $('#dialog').dialog('option', 'buttons');
buttons.Ok = function() { alert('Click rewired!'); };

$('#dialog').dialog('option', 'buttons', buttons);

看到这个小提琴： http : //jsfiddle.net/z4TTH/3/

Answer 4

您可以尝试将新功能代码与Save的Click事件绑定吗？

if(sDialogInstance == 'TestInstance') {
            $('#'+savebtn_id).click(function() {
              alert('A new callback has been assigned.');
              // code for ajax-post will come here.
            });
    }