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」引数の下で関数を呼び出すスパンを持つ要素を作成することを想定しています。ご覧のとおり、デフォルトのパラメータがあり、そのうちの 1 つが「cancelButtonOnClickFunction」です。追加する要素を作成した後、要素が作成される前に「cancelButtonOnClickFunction」内部関数が呼び出されるため、機能しないと思います。私はそれを機能させる方法を尋ねます。

4

2 に答える 2

3

関数内でイベント ハンドラーを使用しても問題はありませんが、非常に煩雑になる可能性があります。イベント処理の代替ソリューションを以下に示します。

についてはmessageOptions、別の jQuery 関数を使用してオブジェクトを結合できます。これは、jquery-ui がデフォルト設定をウィジェットで提供する設定と組み合わせる方法です。

$.extend(default_args, messageOptions)

上記は for ループを置き換え、問題を引き起こしていると思われるコードを削除します。さらに下で messageOptions.header を呼び出す代わりに、常に default_args オブジェクトを使用するようになりました。

messageBoxElement += default_args.header

イベント処理

下位レベルの親を取得して使用.onすると、要素がまだ存在するかどうかにかかわらず、クリック イベントを任意の要素にバインドできます。これは、イベントを変更されない要素にバインドし、子要素がクリックされてその条件 (2 番目のパラメーター) が満たされたときにバブルアップすることによって機能します。これを 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 では関数が第一級市民であるためです。控えめな言い方をすると、関数は数値、文字列、および (その他の) オブジェクトとほぼ同じように「値」であり、引数として使用したり、変数に代入したりするなど、多くのことを行うことができます。 . (実際、in javascriptfunction a() {alert('a')}は を記述する別の方法にすぎませvar a = function() {alert('a')}んが、ここでは軌道から外れています。)

さて、コードの一部を書き留めたので、イベントが正しく接続されていることを確認する必要があります。関数の先頭でこれを行うのに行き詰まっていないため、html が生成された後に行うことができ、html が配置される前に割り当てが発生することを心配する必要はありません。

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

それだけです。ここでは、通常 jquery を操作するときに慣れているような無名関数を提供する代わりに、関数を保持する変数を提供するだけです。これらの 2 つの変更により、コードが解決され、意図したとおりに動作するようになります。そして、途中での私の説明が、その方法と理由についてもう少し理解するのに役立つことを願っています.

于 2012-10-23T22:42:22.407 に答える