1

我需要从几个 jQuery UI 对话框中观察事件。它们都标配有一些您可以收听的事件。到目前为止没有问题。

我可以使用它来将函数绑定到打开事件：

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

但是我需要区分事件起源于哪个对话框。例如：

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

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

方案一：通过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每个对话框一个。然后它将使用idas 前缀或后缀重新触发每个事件。例如，打开#dialog1会触发自定义事件dialog1open。

想法或具体解决方案将在这里受到赞赏

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

4

3 回答 3

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 语句等。（当然，您可以根据您的特定目的使这更复杂。）

于 2012-10-10T15:51:05.223 回答
1

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

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

    /* do whatever */
});

但我同意 JasCav，你可能想多了。

于 2012-10-10T15:57:51.253 回答
0

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');
    });
});
于 2012-10-10T20:02:34.730 回答