2

私は jQuery の素晴らしい世界にいますが、今日は問題に直面しました。

ユーザーが選択できるアプリのリストがあります。アプリを選択するには、ボタンをクリックする必要があります(id="add_app_#{app_id}")。誰かがアプリを追加すると、選択したすべてのアプリをリストするテーブルに行を作成します。この行 (jQuery で作成) には(id="remove_app_#{app_id}")、テーブルからアプリを削除するためのボタンがあります。

私の問題は、remove_app ボタンのクリック イベントを取得する方法がわからないことです (確かに、DOM の準備が整った後に DOM に追加されるためです)。

.on()ただし、 jQuery関数を使用しました...

これが私のコードです：

jQuery(function() {
    $('[id^=add_app_]').click(function() {
        var app_id, version_id;
        version_id = 0;
        app_id = this.getAttribute('data-app_id');

        $("#app_versions_" + app_id + " option:selected").each(function() {
            version_id = $(this).val();
        });

        hide_app_from_selector(app_id);
        display_app_in_table(app_id, version_id);
    });

    $('[id^=remove_app_]').on('click', function() {
        // I NEVER GET HERE !
        var app_id;
        app_id = this.getAttribute('data-app_id');
        remove_app_from_table(app_id);
        display_app_in_selector(app_id);
    });
});
4

2 に答える 2

3

簡単な答え: Event delegationを使用します。

セレクターを2 番目の引数として jQuery の.on().

$( document.body ).on( 'click', '[id^=add_app_]', function() {
});

不要なイベントのバブリングを防ぐために、代わりにpossible をdocument.body使用する必要があります。closest shared parent

于 2013-10-11T08:49:05.463 に答える
0

メソッドを使用してon()、メソッドが最初に呼び出されたときに存在する、動的に作成された要素の祖先にイベント ハンドラーを割り当てることができます。単純に使用している$('[id^=remove_app_]').on(...)のは、呼び出されたときに存在しない要素にイベント ハンドラーを割り当てることです。

これを修正する[id^=remove_app_]には、最初にイベント ハンドラーを割り当てたときに存在する要素の祖先を見つけて、それに割り当てますon()。

$('body').on('click', '[id^=remove_app_]', function() { ... });

この特定のコードでは、動的に作成された要素にイベント ハンドラーを直接割り当てるのではなく、イベント ハンドラーをbody(おそらく関数を呼び出す前に存在する) に委任します。jQueryのドキュメントon()から：on()

セレクターが提供されている場合、イベント ハンドラーは委任されていると見なされます。イベントがバインドされた要素で直接発生した場合、ハンドラーは呼び出されませんが、セレクターに一致する子孫 (内部要素) に対してのみ呼び出されます。jQuery は、イベント ターゲットからハンドラーがアタッチされている要素 (つまり、最も内側の要素から最も外側の要素) までイベントをバブルし、セレクターに一致するそのパスに沿ったすべての要素に対してハンドラーを実行します。

コードを可能な限りパフォーマンスの高いものにするために、動的に作成されない最も近い先祖に委譲を割り当てます。たとえば、次のようになります。

<div id="non-dynamic-container">
    ...
    <elem id="remove_app_123"></elem>
</div>

$('#non-dynamic-container').on('click', '[id^=remove_app_]', function() { ... });
于 2013-10-11T08:49:34.240 に答える