2

編集: 問題は解決されました。Select2 ライブラリには、このタイプのカスタム コマンドがありました。

$("#element").on("change", function (e) { ... }
// Defined as "change"

Select2 3.2 というドロップダウン メニュー ライブラリを使用しています。要するに、コードは選択タグとオプション タグの束を取り、クールなドロップダウン検索リストを生成します。

ただし、サイトがレンダリングされた後。「ソースを表示」をクリックすると、すべての選択タグとオプションタグがまだそこにありますが、新しく生成された派手なメニュー自体を右クリックして「要素を検査」を選択すると（Google Chromeを使用）、htmlはまったく異なります.

これが問題を引き起こしていると思います。この新しいコードはすべて、カスタム ライブラリの JS からレンダリングされ、jQuery イベント コマンドの後にレンダリングされます。

具体的には、ここに私のコマンドがあります：

$(document.body).on('click', '.select2-result-label', function() {
        var name = $(this).text();
        var post_to = '/myurl/';
        $.post(post_to, { dat: dat},
            function(response) {
                ...
            }, 'json'
        )

私は on() メソッドがこの種のものを処理すると信じていますが、どうやらそうではないようです。

関連する編集：これは別のスタックオーバーフロー投稿からの宣伝文句です：

The view page source page shows you the exact text that 
was returned by the server.     

Inspect element actually shows you the fully rendered DOM tree.

それを知っていると、おそらくこれを解決するのが簡単になります。

これはJS Fiddle関連です：

http://jsfiddle.net/JpvDt/47/

マルチバーの「x」をクリックすると、アラート「機能しました」が表示されるようにしてください。現在、私のコードでは、x を含むクラスを登録する必要があります。

$(document.body).on("click", ".select2-search-choice-close", alert("worked"));
4

3 に答える 3

2

シナリオ 1:

あなたの問題は、本当に BADであるDOM 全体のメソッドにバインドしている可能性があることです。したがって、常に、コントロールが存在する最も近い div (最も近い親要素) にバインドするようにしてください。

Jquery APIからのイベント パフォーマンスについては、次のように記述されています。

ドキュメント ツリーの最上部近くに委任されたイベント ハンドラを多数アタッチすると、パフォーマンスが低下する可能性があります。イベントが発生するたびに、jQuery は、そのタイプのすべての添付イベントのすべてのセレクターを、イベント ターゲットからドキュメントの先頭までのパス内のすべての要素と比較する必要があります。最高のパフォーマンスを得るには、委任されたイベントをターゲット要素にできるだけ近いドキュメントの場所に添付します。大きなドキュメントの委任イベントに document または document.body を過度に使用しないでください。

シナリオ 2:

以下のように on イベントを呼び出します (off イベントを使用)。

$(#yourElement).off('click').on('click', '.select2-result-label', function() {
        var name = $(this).text();
        var post_to = '/myurl/';
        $.post(post_to, { dat: dat},
            function(response) {
                ...
            }, 'json'
        )

これがお役に立てば幸いです。

于 2012-12-31T11:55:19.940 に答える
1

結局のところ、Select2 ライブラリには、ツールバーを将来変更するためのカスタム コマンドが含まれていました。詳細はこちら: http://ivaynberg.github.com/select2/#programmatic

多くの標準化された jQuery 呼び出しは Select2 では機能しないことに注意してください。カスタム セットアップを使用する必要があります。

$("#element").on("change", function (e) { ... }
// Defined as "change"
于 2012-12-31T21:30:03.787 に答える
0

$(document.body) を $(document) に置き換えるだけです

于 2012-12-31T11:55:18.157 に答える