-3

ターゲット コンテナーにアタッチされているコンテナーを動的に追加する方法があります。アクションが実行されたら、アクションコンテナを削除しましたが、親コンテナにクラスを追加する必要がありますが、問題は設定されています(親コンテナへのクラス名)が、それ自体が削除されます。より明確にするために、サンプルコードを追加しています

<div class="main">
  <ul>
    <li>some contents</li>
    ................
    ................
  </ul>
  <ul class="dynamic_container">
   <li>actions</li>
   ................
  </ul>
</div>

dynamic_container は、ユーザーがメイン クラス コンテナにマウスオーバーすると追加され、アクションが実行されると削除されます。しかし、今では追加されますが（クラス名）、削除されます。これは基本的に $(e.target) が削除されるためだと思います....

アドバイス/提案をいただければ幸いです。前もって感謝します。

編集 ：

$(e.target).parents('.main').addClass('current'); (このコードではクラスを .main div に追加できません) . このコードは ul.dynamic_container から実行されます (これは div.main のマウスオーバーで dom に追加されます)

編集2：jsfiddleリンク：これは構造です（実際のコードではありません）

http://jsfiddle.net/CASy6/

4

1 に答える 1

1

フィドルを投稿していただきありがとうございます。これで、動作を妨げているいくつかの問題を特定できます。

最初の問題は、ボタンの上にマウスを移動しようとすると、ボタンが消えてしまうことです。およびハンドラー関数にいくつかのconsole.logステートメントを追加すると、呼び出しが多すぎることがわかります。これは、ネストされた要素がある状況でこれらのイベントが機能する方法によるものです。mouseovermouseout

jQuery は、この問題に対する適切な解決策を提供します:mouseenterおよびmouseleaveイベントです。API docs、特に と の違いを説明するセクションでmouseoverそれらについて読んでくださいmouseenter。

このバージョンの jsFiddle に実装されているこの修正を参照してください: http://jsfiddle.net/CASy6/1/。これにより、実際にボタンをクリックできるようになり、また、不要な通話.append()や.remove()呼び出しが大幅に回避されます。

次の問題は、ボタンをクリックしたときにハンドラーが呼び出されないことです。

この理由は、例えばを呼び出してハンドラーをセットアップしたためです。

$('li.first').on('click', function(e){ ... });

ページがロードされたときですが、その時点ではセレクターは何も一致しません。これは、まだli.firstいずれかの にボタンを追加していないためです。divしたがって、ハンドラーはページの読み込み時にのみアタッチされ、アタッチするものは何もありません。

この問題の解決策の 1 つは、委任されたイベントを使用することです ( docs を参照)。これは、コンテナ要素 (ページの読み込み時を含め、常に存在する) にハンドラーをアタッチし、子孫要素から発生するイベントを処理することを意味します。

この場合、デリゲートされたイベント ハンドラーを div にアタッチして.main、ボタンの 1 つからのクリックを処理できます。

$('div.main').on('click', 'button.first', function(e){
    $(this).closest('.main').addClass('current');
    alert('first action');
});

2 番目の引数button.firstは、このハンドラーによって処理される子孫イベントを決定するセレクターです。(属性が要素ではなく要素にclassアタッチされるように、追加された html を修正しました。2 つのボタン間で一貫性がありませんでした。)buttonli

ここでこれらの修正を参照してください: http://jsfiddle.net/CASy6/2/

于 2013-03-31T20:01:16.240 に答える