如何在將來將要創建的元素上傳遞jquery函數事件

Question

我希望我能解釋我的自我。 我想創建一個具有參數的函數，其中一個參數是一個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);
}​

該代碼假定創建一個具有跨度的元素，單擊該跨度將在'cancelButtonOnClickFunction'參數下調用該函數。 如您所見，有默認參數，其中之一是'cancelButtonOnClickFunction'。 創建完元素后，我認為它不起作用，因為在創建元素之前會先調用“ cancelButtonOnClickFunction”內部函數。 我會問如何使其工作。

Answer 1

在函數中使用事件處理程序沒有問題，盡管它可能會變得很混亂。 我在下面為您提供事件處理的替代解決方案。

至於messageOptions ，您可以使用另一個jQuery函數來組合對象。 這就是jquery-ui將其默認設置與您在其小部件中提供的設置結合在一起的方式。

$.extend(default_args, messageOptions)

上面的代碼將替換您的for循環，並刪除看起來會引起問題的代碼段。 現在，您不必再調用messageOptions.header了，而是始終使用default_args對象。

messageBoxElement += default_args.header

事件處理

如果您使用較低級別的父級並使用.on ，則可以將click事件綁定到任何元素（無論它們是否存在）。 通過將事件綁定到不變的元素，然后在單擊任何子元素並滿足其條件（第二個參數）時冒泡，可以實現此目的。 您可以在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時那樣提供匿名函數。 這兩個更改應該可以解決代碼並確保它可以執行您想要的操作。 希望我的解釋能幫助您更多地了解其方式和原因。