Question

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

许多模块仍在使用自定义帖子而不是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

您可以尝试使用保存的Click事件绑定新的功能代码吗？

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

重新定义jQuery对话框按钮

4 个答案: