問題タブ [event-delegation]

ユーザーが選択できるはずのテキストがあるシナリオがあります。問題は、その上に UI オーバーレイがあり、デフォルトでテキストを選択できないことです。オーバーレイを保持したままテキストを選択できるようにする論理的な方法は、合成イベントを使用することです ( を使用しますdocument.createEvent) が、何らかの理由で期待どおりに機能しません。

イベントは正しく委任され、ハンドラーを起動しているように見えますが、テキストが選択されていません。ここに例があります。これは、問題を大まかに単純化したものです。

いくつかのメモ

1. Firefox では、オーバーレイの外で選択を開始すると、オーバーレイの下にある場合でも、必要なテキストを選択できます
2. カバーされていない領域に通常の選択があり、オーバーレイをクリックすると、委任されたmousedownイベントから選択を削除することが期待されますが、それは起こりません

委任する必要があるイベントがありませんか ( mousedown、mousemoveおよびがありmouseupます)。それとも、ブラウザがそのような動作を無効にするための何らかのセキュリティ対策ですか (注番号 2 を参照)。望ましい結果を得る方法に関する他の提案はありますか? 現在のオーバーレイ ソリューションを完全に回避する必要があることはわかっていますが、問題自体についてはすでに興味があります。

多くの画像を含むコンテナがあります。各画像でクリックやその他のマウスイベントのリスナーを追加する代わりに、画像の親でこれらのイベントのみをリッスンしたいと思います。

それは可能ですか？

私はこのようなマークアップをいくつか持っています(クラスは説明のためだけです):

つまり、ネストされた並べ替え可能なリストです。ただし、ソート可能なプラグインで十分です。内部のリストは接続されていますが、各 li (以下、「アイテム」) はそのレベルを維持するためです。アイテムには、常に表示されるヘッダーと、展開された状態のときに表示されるセクションがあり、ヘッダーをクリックすると切り替えられます。ユーザーは、どちらのレベルからでも項目を自由に追加および削除できます。トップレベルのアイテムを追加すると、その中に空のネスト リストが含まれます。私の質問は、新しく作成されたアイテムの JS 初期化に関するものです。それらはいくつかの共通機能を共有しますが、

と

(補足質問: これは HTML5 の詳細/要約タグを使用するのに適切な場所でしょうか?最終的な仕様にそれが組み込まれるかどうかについては、やや不確かなようです。とにかくそれには JS が必要です.しかし、私は大衆に質問を投げかけます.こんにちは、大衆.)

ルート リストが、ページの読み込み時に存在することが保証されている唯一の (関連する) 要素である場合、.on() が効果的に機能するには、すべてのイベントをその要素にバインドし、それぞれの正確なセレクターを綴る必要があります。それを理解します。したがって、たとえば、別々の機能を隣り合わせの 2 つのボタンに関連付けるには、セレクターを毎回完全にスペルアウトする必要があります。

それは正確ですか？その場合、新しいアイテムがページに追加されたときに .on() を忘れてイベントをバインドする方が理にかなっていますか? 応答に違いが生じる場合、アイテムの総数はおそらくせいぜい数十になるでしょう。

無限スクロールのページがあります。ajax機能は、最初に読み込まれたときにページに存在するフォームでは正常に機能しますが、無限スクロールajax機能から読み込まれたフォームでは機能しません。答えを探すために約5日間検索しましたが、まだ検索していません。これがjavascriptの一部です：

この部分の理由は:not(.member)、検索フォームなど、ページ上の他のフォームがスクリプトに含まれていないためです。

私はもう試した

と

と同様

これらはいずれも、最初のページの読み込み後に読み込まれたフォームでは機能しません。他に何か提案はありますか？ちなみに私はjquery1.7.1を使用しています。私も試しました

次のコードでイベント委任を実装しようとしています:

イベントをバブリングさせて、<li>アイテムをクリックするとアラートが表示さitemれ、次に別のアラートが表示されるようにしますlist。しかし、このコードはitem. イベントが泡立つように変更するにはどうすればよいですか?

デリゲート ハンドラーがアタッチされている要素を削除するときに、IE8 で jQuery の .delegate() メソッドを使用すると問題が発生しました。シナリオは次のとおりです。それぞれに削除ボタンがある行を含むテーブルがありました。行は動的に作成されたため、デリゲートを使用してクリック イベントを処理する削除ボタンが接続されました。最後の行を削除するときが来たとき、テーブル全体が削除されました (テーブルは、少なくとも 1 つの行を作成する値があった場合にのみ作成されました)。それでも、一部のページでは機能しましたが、1 つだけでは機能しませんでした (各ページでまったく同じコードが使用されました)。デリゲートのjQueryコードにある行。

問題は、ハンドラーが使用している DOM 要素の一部が削除された場合のハンドラーのベスト プラクティスは何でしょうか? ある時点で undelegate を呼び出す必要がありますか? もしそうなら、どこで?

私のアプリケーションでは、いくつかの新しい要素を作成し、ユーザーの操作に従ってそれらをページに追加します。

この div 要素を作成した後、いくつかのイベントを追加します。

これは、ページで生成された結果です (div には img タグと span タグが含まれます)。

ページがロードされた後、問題が発生します。

画像を直接クリックすると、clickイベントはトリガーされませんが、mousedownイベントはトリガーされます。

画像なしで div を直接クリックすると、すべてうまくいきます。

画像をクリックすると、clickイベントがdivに委任されないようです。

しかし、Chrome 開発ツールを使用して最終的に生成されたコードをコピーすると、次のようになります。

次に、それを新しい .html ファイルにコピーし、イベント スクリプトを追加します。

これで、div 内のどこをクリックしても、2 つのイベントの両方が発生します。

私は本当に頭がおかしいです、何が問題なのですか？生成されたdivに対して特別なことは何もしません。

それで、あなたの誰かがこの問題に遭遇したかどうか知りたいですか？または、どのような場合にこの種の例外が発生する可能性がありますか?

アップデート：

クロスブラウザでの使用のみで、mousedownとにかくイベントがうまく機能することに注意してください。

私のHTML（動的ではない）は次のようになります：

これは機能します：

これはしません:

呼び出しを削除する$("#domain").attr("disabled", "disabled");と、委譲の機能が復元されるため、イベントがどのようにトリガーされたか (つまり、ユーザーの操作によるものでもない)$(document).on()に関係なく、要素が無効になっているときにイベントがバブルしないように見えます。ただし、どちらのハンドラーもイベントの伝播を防ぐために何も返さないか呼び出しを行わず、jQuery のドキュメントには伝播に影響を与える「無効な」属性について言及されていないため、その理由はわかりません。ここで何が欠けていますか？.trigger.triggerHandler

私はこのようにやっています：

上記と同様のコードで、一度だけ機能します。つまり、最初に入力してEnterをクリックすると機能しますが、次回はまったく反応しません。

2 番目のコードは常に機能しますが、最初のコードは 1 回しか機能しません。

また、2 番目のコードが 1 回実行されると、最初のコードは 1 回も実行されません。

解決策は何ですか？ここにはいくつかのルールが欠けていると思います。それらについて調べますので教えていただけますか。ありがとう

この質問のために、ネストされたul「ツリー」がありますが、これは最上位に数レベルと数個の子のみですが、最上位のul（id="group"ここで対象）からいくつかある可能性があると想定できる場合ネストされた要素ですが、常にこの構造に従います。現時点では、折りたたみ時に子の ul 要素を折りたたむトップ要素のみがあります。私は、すべての ul 要素でこの性質を実現したいと考えています。さらに、クリックした別の「同じレベル」で開いている要素も折りたたんで、別の ul だけが開いているようにしたいと考えています。達成しようとしている機能について説明できたことを願っています。私は使うべきだと感じていますが、それを使っslideToggle()たすべての試みはうまくいきませんでした.delegate() しかし、私は伝播（「イベントバブリング」）を理解しており、それがそのようなタスクに進む方法だと感じる理由の一部です. もう 1 つは、新しい要素を ul に追加する必要があるかもしれないということです。だからここに私が現在持っているものがあります：

そして、これがテストケースへのjsfiddle リンクです。これを達成できる最善の方法であれば、すべての意見を歓迎します。