jquery - 如何在 jQuery 中选择一个元素并执行匿名函数而不将其绑定(bind)到事件？

Question

假设我有一个带有两个 anchor 的 div:

<div id="#dialog">
    <a href="#" class="ok">Delete</a>
    <a href="#" class="cancel">Cancel</a>
</div>

为了使<a> anchor 工作，我使用以下两个调用:

$('#dialog a.ok').click(function() {
    $.ajax({ ... });
    $(this).closest('#dialog').dialog('close');
});

 $('#dialog a.cancel').click(function() {
    $(this).closest('#dialog').dialog('close');
});

我希望能够将它组合成这样的东西:

$('#dialog').execute(function() {
    var dialog = $(this);

    dialog.find('a.ok').click(function() {
        $.ajax({ ... });
        dialog.dialog('close');
    });

    dialog.find('a.cancel').click(function() {
        dialog.dialog('close');
    });
});

假货exeucte() function 将立即执行匿名函数，而不将其绑定(bind)到 DOM 事件。我想使用此模式将相关功能分组在一起(在本例中，对话框有两个彼此密切相关的按钮)。

我的问题有两个:

1. 我应该在这里使用的实际 jQuery 调用是什么？
2. 这是将相关功能分组在一起的最佳方式吗？

Answer 1

为此，您不需要任何特殊的 jQuery 内容，只需编写一个函数并为其提供 $('#dialog') 作为参数:

function do_stuff(dialog) {
    dialog.find('a.ok').click(function() {
        $.ajax({ ... });
        dialog.dialog('close');
    });

    dialog.find('a.cancel').click(function() {
        dialog.dialog('close');
    });
}

do_stuff($('#dialog'));

或者，如果您确实喜欢匿名函数，则可以使用 each :

$('#dialog').each(function() {
    var dialog = $(this);

    dialog.find('a.ok').click(function() {
        $.ajax({ ... });
        dialog.dialog('close');
    });

    dialog.find('a.cancel').click(function() {
        dialog.dialog('close');
    });
});

但是将 each 与只能匹配单个元素的选择器一起使用看起来很有趣。您还可以定义自己的自执行函数:

(function(dialog) {
    dialog.find('a.ok').click(function() {
        $.ajax({ ... });
        dialog.dialog('close');
    });

    dialog.find('a.cancel').click(function() {
        dialog.dialog('close');
    });
})($('#dialog'));

这里没有最好的，您可以使用适合您的特定情况和本地惯例的东西。