jquery 通过自定义事件从对话框传递数据

Question

我有一个在父窗口内调用的对话框。该对话框包含另一个 View (我们称之为 childView)，其中有一些按钮。我想做的是，当单击按钮时，我会触发一个在父窗口上“捕获”的函数。

例如:在父 View 上:

$("#dialog").dialog({
            autoOpen: false,
            height: 350,
            width: 530,
            modal: true,
            open: function (event, ui) {
                $(this).load("ChildView");
            },
            close: function (event, ui) {
                $("#dialog").dialog().dialog('close');
            }
        }).on("ChildButtonClick", function (arg) { alert( "Hello " + arg); })

subview

 ...
 <input type="button" id="myButton" onclick="ClickButton('Bob');" />
 <input type="button" id="myButton" onclick="ClickButton('Alice');" />
  ...


function ClickButton(arg) {

        ...trigger("ChildButtonClick", arg);
    }

可以做这样的事情吗？

谢谢

Answer 1

是的，可以做到这一点。

父 View :

$("#dialog").dialog({
    autoOpen: true,
    height: 350,
    width: 530,
    modal: true,
    open: function (event, ui) {
        $(this).load("ChildView.html");
    }
}).on("ChildButtonClick", function (event, data) {
    alert( "Hello " +  data.name);
    })

ChildView(ChildView.html):

// HTML
<input type="button" id="myButton1" onclick="ClickButton('Bob');" value="Btn1" />
<input type="button" id="myButton2" onclick="ClickButton('Alice');"  value="Btn2" />
// JS
function ClickButton(arg) {
        $("#dialog").trigger("ChildButtonClick", [{name:arg}]);
    }

这样，您就可以在父窗口中捕获通过子窗口传递的任何内容。