如何将页面上的javascript与modal/jqueryui对话框中的javascript松散耦合？

我有一个页面，用户点击“添加人员”按钮。这会弹出一个通过ajax加载并与jQuery UI对话框一起显示的模式。弹出窗口包含一个搜索表单，用户在其中选择要添加的人员。当他们点击“ok”时，我希望页面上的javascript检索所选人员的ID，并将其显示在调出模式的页面上

这一切都很好，我可以让它工作，但它总是丑陋的，我最终在模态视图或页面视图中编写代码，这需要了解另一个视图中的DOM。例如，模态可以意识到在调用页面上有一个

div#new person

，它可以将新的person放在那里。但这需要模态知道基页

---

或者我可以将javascript函数从应用程序代码传递到模式，但这需要模式知道该函数并显式调用它。jQueryUI对话框提供了创建按钮的功能，在基本页面上指定了

onclick

，但我的模式比这更复杂（我不希望在选择一个人之前显示这些按钮），所以我不能使用它们。

我有一个回调类，可以在Js类之间传递事件

var Callbacks = {};
Callbacks.triggers = {};

Callbacks.addCallback = function( trigger, instance, method ){

    if( this.triggers[ trigger ] == undefined ){
        this.triggers[ trigger ] = Array( { obj:instance, action:method } );
    }else{
        this.triggers[ trigger ].push( { obj:instance, action:method } );
    };
};

Callbacks.fireCallback = function( trigger, param ){

    if( this.triggers[ trigger ] == undefined ){
        return;
    };

    for (var i=0; i < this.triggers[ trigger ].length; i++) {
        var listener = this.triggers[ trigger ][ i ];

        if( listener.action != undefined ){
            listener.obj[ listener.action ]( param );
        }
    };

};

---

我有一个回调类，在Js类之间传递事件

var Callbacks = {};
Callbacks.triggers = {};

Callbacks.addCallback = function( trigger, instance, method ){

    if( this.triggers[ trigger ] == undefined ){
        this.triggers[ trigger ] = Array( { obj:instance, action:method } );
    }else{
        this.triggers[ trigger ].push( { obj:instance, action:method } );
    };
};

Callbacks.fireCallback = function( trigger, param ){

    if( this.triggers[ trigger ] == undefined ){
        return;
    };

    for (var i=0; i < this.triggers[ trigger ].length; i++) {
        var listener = this.triggers[ trigger ][ i ];

        if( listener.action != undefined ){
            listener.obj[ listener.action ]( param );
        }
    };

};