Question

我需要观察几个jQuery UI对话框中的事件。它们都标配a few events，你可以听。到目前为止没问题。

我可以使用它将函数绑定到open事件：

$(document).bind('dialogopen', function() {});

但是我需要区分事件来自哪个对话框。例如：

$('#dialog1').dialog();
$('#dialog2').dialog();

打开其中任何一个都会触发相同的事件。绑定到文档的函数将在打开时触发两个对话框。这不是我想要的。我找到了两种可能的解决方案，既没有感觉很好，但至少可以完成这项工作。

解决方案1：通过open事件的回调函数触发自定义事件

// Trigger events
$('#dialog1').dialog({open: function() {
        $(this).trigger('dialog1open')
    }
});
$('#dialog2').dialog({open: function() {
        $(this).trigger('dialog2open')
    }
});

// Observe events
$(document).bind('dialog1open', function() {
    //actions specifik to dialog 1 open event
});
$(document).bind('dialog2open', function() {
    //actions specifik to dialog 2 open event
});

这种方式需要我为所有事件编写自定义函数，在启动它们时在所有对话框上编写，只需使用特定于每个对话框的事件名称转发它。

解决方案2： 在事件参数中捕获目标。它看起来像这样：

$(document).bind('dialogopen', function(event) {
    el = event.target; // get the element triggering the event
    switch(el.id) { // Action depending on the triggers id
        case dialog1:
            //do something
            break;
        case dialog2:
            //do something else
            break
    }
});

另一方面，这种方式要求我为每个我有兴趣捕捉的事件加载一些开关案例。

在这里写一个包装插件会不错？一个插件，强制您为每个对话框提供id。然后，它会以id作为前缀或后缀重新触发每个事件。例如，打开#dialog1会触发自定义事件dialog1open。

这里可以理解想法或具体解决方案

编辑：我没有提到的一个重要的事情是，我有观察员认为主题（如#dialog1和#dialog2）不知道。必须考虑到这一点。

Answer 1

我可能错了，但似乎你在这里过分思考这个问题。

如果要绑定到单个对话框的打开事件，则使用解决方案1进入正确的路径，但是您不想触发该事件，因为一旦您进入该功能，该事件已经被触发...

// Trigger events
$('#dialog1').dialog({open: function() {
        // Don't do this.
        // $(this).trigger('dialog1open')

        // Just do what you want to do in response to this particular dialog opening.
    }
});
$('#dialog2').dialog({open: function() {
        // Again, don't do this.
        // $(this).trigger('dialog2open')

        // Just do what you want to do in response to this particular dialog opening.
    }
});

现在，如果你想获得一些代码重用（AKA，也许响应几乎相同），你可以编写一个单独的函数并传入参数来自定义响应。所以...这样的事情：

$('#dialog1').dialog({
    open: openAlert("dialog1");
});
$('#dialog2').dialog({
    open: openAlert("dialog2");
});

function openAlert(dialogName) {
    alert(dialogName + " just opened up!");
}

这样，你得到了一些重用，但是避免了所有的case语句等等。（当然，你可以根据你的特定目的使这更复杂。）

Answer 2

我将所有对话包装在div中，并附加一个监听器。

$("#dialog_wrapper").delegate(".dialog", "dialogopen", function(e){
    var open_dialog_id = $(this).attr("id"); //get id of child dialog

    /* do whatever */
});

但我同意JasCav，你可能会过度思考它。

Answer 3

MalSu通过.delegate带领我朝着正确的方向发展。将jQuery UI和jQuery升级到最新版本我能够使用.on

这是我的测试示例

来自body

<div id="dialog1">Dialog number one</div>
<div id="dialog2">Dialog number two</div>
<button id="d1Opener">Open Dialog One</button>
<button id="d2Opener">Open Dialog Two</button>

来自<script>

$(document).ready(function() {
    $('#dialog1, #dialog2').dialog({
        modal: true,
        autoOpen: false
    });
    $('#d1Opener').click(function() {
        $('#dialog1').dialog('open');
    });
    $('#d2Opener').click(function() {
        $('#dialog2').dialog('open');
    });
    $(document).on('dialogopen', function() {
        console.log('A dialog was opened');
    });
    $(document).on('dialogopen', '#dialog1', function() {
        console.log('Dialog1 was opened');
    });
    $(document).on('dialogopen', '#dialog2', function() {
        console.log('Dialog2 was opened');
    });
});

观察来自几个jQuery UI对话框的事件

3 个答案: