0

我希望我能很好地解释我的自我。我想创建一个具有参数的函数，其中一个参数是 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”内部函数。我会问如何使它工作。

4

2 回答 2

3

在函数中使用事件处理程序没有问题，尽管它会变得非常混乱。我在下面为您提供了用于事件处理的替代解决方案。

至于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();
});
于 2012-10-23T21:29:10.860 回答
1

问题不在于您的代码执行得太早。事实上它根本没有被执行！让我们开始修复代码，并在此过程中了解为什么您的原始版本不起作用。

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

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

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

现在这是一个问题：你没有在这里执行一个函数。您正在定义一个函数并将该函数分配给该cancelButtonOnClickFunction属性。这是可能的，因为在 javascript 中，函数是一等公民。用不太花哨的话来说，这意味着函数是“值”，就像数字、字符串和（其他）对象一样，因此，你可以用它们做很多事情，比如将它们用作参数或将它们分配给变量. （事实上​​，在 javascriptfunction a() {alert('a')}中只是另一种编写方式var a = function() {alert('a')}，但我在这里偏离了轨道。）

好的，既然我们已经记下了那段代码，我们现在需要确保事件连接正确。因为我们并没有在函数的顶部执行此操作，所以我们可以在生成 html 之后执行此操作，并且我们不必担心在 html 就位之前发生分配：

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

就是这样，这里我们只提供保存函数的变量，而不是像通常使用 jquery 时那样提供匿名函数。这两个更改应该解决代码并确保它执行您希望它执行的操作。希望我一路上的解释能帮助您更多地了解如何以及为什么。

于 2012-10-23T22:42:22.407 回答