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

我希望我能解释我的自我好处。 我想创建一个具有参数的函数，其中一个参数是jQuery函数，该函数将在调用原始函数后创建的元素的事件中执行（与dialog非常类似）。以下是我尝试做的代码：

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);
}​

功能消息框（消息选项）{
变量默认参数={
“标头”：null，
“文本”：null，
“acceptButtonText”：“ok”，
“AcceptButtonNonClickFunction”：null，
“cancelButtonText”：“cancel”，
“CancelButtonNonClickFunction”：函数（）{
$（“#取消_消息_框_div_按钮_span”）。单击（函数（）{
$（'.greyBackground'）.remove（）；
})
}
};
for（默认参数中的var索引）{
如果（消息选项的类型[索引]=“未定义”）消息选项[索引]=默认参数[索引]；
}
putGrayBackground（）；
var messageBoxElement=''；
messageBoxElement+=''；
messageBoxElement+=messageOptions.header；
messageBoxElement+=''；
messageBoxElement+=''；
messageBoxElement+=messageOptions.text；
messageBoxElement+=''；
messageBoxElement+=''；
messageBoxElement+=''；
MessageBoxeElement+=messageOptions.cancelButtonText；
messageBoxElement+=''；
messageBoxElement+=''；
messageBoxElement+=''；
$（'.greyBackground'）.append（messageBoxElement）；
}​

代码假设创建一个元素，该元素有一个跨度，单击该跨度时将调用“CancelButtonNonClickFunction”参数下的函数。

---

如您所见，有一些默认参数，其中一个是“CancelButtonNonClickFunction”。在我创建了元素之后，我附加了它，我认为它不起作用，因为在创建元素之前调用了“CancelButtonNonClickFunction”内部函数。我会问如何让它工作

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

对于

messageOptions

，您可以使用另一个jQuery函数来组合对象。这就是jQueryUI如何将其默认设置与您在其小部件中提供的设置相结合

$.extend(default_args, messageOptions)

以上内容将替换for循环，并删除可能导致问题的代码段。现在，您将始终使用默认的_args对象，而不是进一步调用messageOptions.header

messageBoxElement += default_args.header

事件处理

如果您选择较低级别的父级并使用

。在

上，您可以将单击事件绑定到任何元素，无论它们是否存在。其工作原理是将事件绑定到非更改元素，然后在单击任何子元素并满足其条件时冒泡（第二个参数）。您可以在文档中使用此选项。就绪功能：

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

---

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

对于

messageOptions

，您可以使用另一个jQuery函数来组合对象。这就是jQueryUI如何将其默认设置与您在其小部件中提供的设置相结合

$.extend(default_args, messageOptions)

以上内容将替换for循环，并删除可能导致问题的代码段。现在，您将始终使用默认的_args对象，而不是进一步调用messageOptions.header

messageBoxElement += default_args.header

事件处理

如果您选择较低级别的父级并使用

。在

上，您可以将单击事件绑定到任何元素，无论它们是否存在。其工作原理是将事件绑定到非更改元素，然后在单击任何子元素并满足其条件时冒泡（第二个参数）。您可以在文档中使用此选项。就绪功能：

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

---

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

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

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

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

这里有一个问题：您没有在这里执行函数。您正在定义一个函数并将该函数分配给

cancelButtonNonClickFunction

属性。这是可能的，因为在javascript中，函数是一等公民。用不太花哨的话来说，这意味着函数是“值”，与数字、字符串和（其他）对象的方式大致相同，因此，您可以使用它们做很多事情，比如将它们用作参数或将它们指定给变量。（事实上，在javascript中，函数a（）{alert（'a'）}只是编写

var a=function（）{alert（'a'）}

的另一种方式，但我在这里偏离了正轨。）

好的，现在我们已经完成了这段代码，我们现在需要确保事件连接正确。因为我们不需要在函数的顶部执行此操作，所以我们可以在生成html之后执行此操作，而不必再担心在html就位之前发生的赋值：

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

---

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

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

首先，我们改变一些