Question

我希望我能解释自己的善良。我想创建一个函数，该函数具有一个参数，其中一个参数是一个jQuery函数，它将在原始函数调用后创建的元素事件上执行（它与对话框非常相似）。以下是我要做的代码：

function messageBox(messageOptions) {
    var default_args = {
        'header': null,
        'text': null,
        'acceptButtonText': 'ok',
        'acceptButtonOnClickFunction': null,
        'cancelButtonText': 'cancel',
        'cancelButtonOnClickFunction': function() {
            $('#cancel_message_box_div_button_span').click(function() {
                $('.greyBackground').remove();
            })
        }
    };
    for (var index in default_args) {
        if (typeof messageOptions[index] == "undefined") messageOptions[index] = default_args[index];
    }

    putGrayBackground();
    var messageBoxElement = '<div class="messageBoxDiv">';
    messageBoxElement += '<legend class="messageBoxDivHeader">';
    messageBoxElement += messageOptions.header;
    messageBoxElement += '</legend>';
    messageBoxElement += '<div class="messageBoxDivText">';
    messageBoxElement += messageOptions.text;
    messageBoxElement += '</div>';
    messageBoxElement += '<div class="messageBoxDivButtons">';
    messageBoxElement += '<div id="cancel_message_box_div_button_span" class="messageBoxDivButtonSpan">';
    messageBoxElement += messageOptions.cancelButtonText;
    messageBoxElement += '</div>';
    messageBoxElement += '</div>';
    messageBoxElement += '</div>';
    $('.greyBackground').append(messageBoxElement);
}

代码假设创建一个具有跨度的元素，当单击它时将调用“cancelButtonOnClickFunction”参数下的函数。如您所见，有默认参数，其中一个是'cancelButtonOnClickFunction'。在我创建了我追加它的元素之后，我认为它不起作用，因为在创建元素之前调用了'cancelButtonOnClickFunction'内部函数。我会问如何使它工作。

Answer 1

在函数中使用事件处理程序没有问题，尽管它可能会变得非常混乱。我在下面有一个替代解决方案，用于事件处理。

对于messageOptions，您可以使用另一个jQuery函数来组合对象。这就是jquery-ui将默认设置与您在小部件中提供的设置相结合的方式。

$.extend(default_args, messageOptions)

上面将替换你的for循环并删除那些看起来会导致问题的代码。现在，您不再调用messageOptions.header，而是始终使用default_args对象。

messageBoxElement += default_args.header

事件处理

如果您使用较低级别的父级并使用.on，则可以将单击事件绑定到任何元素（无论它们是否存在）。这可以通过将事件绑定到非更改元素，然后在单击任何子元素并满足其条件（第二个参数）时冒泡。您可以在document.ready函数中使用它：

$('#message_box_container').on('click', '#cancel_message_box_div_button_span', function(e)
{
    $('.grey-background').remove();
});

Answer 2

问题不在于您的代码执行得太早。实际上它根本没有执行！让我们来修复代码，一路上我们将了解原始版本无法正常工作的原因。

首先，我们更改默认参数中的内容：

    [..]
    'cancelButtonOnClickFunction': function() {
            $('.greyBackground').remove();
        })
    [..]

基本上，您希望您的用户以与他们直接使用jquery时完全相同的方式定义他们的事件处理程序（或回调），因此您应该在默认参数中执行相同的操作。

现在抓住了：你没有在这里执行一个函数。您正在定义一个函数并将该函数分配给cancelButtonOnClickFunction属性。这是可能的，因为在javascript中，函数是一等公民。在不那么花哨的单词中，这意味着函数是“值”，其方式与数字，字符串和（其他）对象大致相同，因此，您可以使用它们做很多事情，比如将它们用作参数或将它们分配给变量。（事实上，在javascript中function a() {alert('a')}只是写var a = function() {alert('a')}的另一种方式，但我在这里偏离轨道。）

好了，现在我们得到了那段代码，我们现在需要确保事件正确连接。因为我们不会在函数的顶部执行此操作，所以我们可以在生成html之后执行此操作，并且我们将不再担心在html到位之前发生的任务：

    [..]
    $('.greyBackground').append(messageBoxElement);
    $('#cancel_message_box_div_button_span').click(messageOptions.cancelButtonOnClickFunction);
}

就是这样，在这里我们只提供保存函数的变量，而不是提供像我们在正常使用jquery时习惯的匿名函数。这两个更改应该解决代码并确保它执行您希望它执行的操作。希望我在此过程中的解释可以帮助您更多地了解方法和原因。

如何在将来创建的元素上传递jquery函数事件

2 个答案: