0

ユーザー入力に基づいて DIV 要素/HTML をページに追加できるようにする JQuery を作成しました (例: リンクとそのリンクのコメントを取得します)。

それは働いています。

しかし、要素の1つにマウスを合わせると色が変わるコードを追加しようとしています（ユーザーは複数を追加できます）。ユーザーは「X」または何らかのゴミ箱アイコンをクリックして削除できます.

何らかの理由で (私の JavaScript カンフーはかなり弱い)、.mouseover()関数が機能していません。.mouseover()ブラウザが最初に開いたときにそこになかったので、実行できないからだと思いますか？(ただし、を使用して他の JQuery コードによって後で追加されますappend())

動作しないコードは次のとおりです。

 $(document).ready(function() {
    $('.link_and_description').mouseover(function() {
        $(this).css('background', '#fef4a7');
    }).mouseout(function(){
        $(this).css('background', '#f5f5f5');
    });
 });

ここでjsfiddleを見ることができます：

http://jsfiddle.net/CG4Ew/

4

3 に答える 3

2

要素は動的に追加されるため、link_and_descriptionイベント伝播を使用してホバー イベントを登録する必要があります。

$(document).ready(function() {
    $(document).on('mouseenter', '.link_and_description', function() {
        $(this).css('background', '#fef4a7');
    }).on('mouseleave', '.link_and_description', function(){
        $(this).css('background', '#f5f5f5');
    });
});

デモ:フィドル

于 2013-06-05T03:47:16.260 に答える
1

要素を動的に追加しているため、添付された直接イベントはDOMに存在しなかったため、何の効果もありません。でイベント委任を使用することで、それに取り組むことができますon()。あなたの場合、 onclick イベント中に将来追加される#urls_go_belowクラスを持つ要素への委譲のために、イベントをコンテナにバインドします。.link_and_description

この方法を試してください。

 $('#urls_go_below').on({   //<-- Bind the event to the container for delegation, 
               //if '#urls_go_below' doesnot exist in DOM at the time of registring        
               //then you can use another container or worstcase document element. i.e $(document).on(...
        mouseenter: function () {
             $(this).css('background', '#fef4a7');
         },
         mouseleave: function () {
             $(this).css('background', '#f5f5f5');
         }
     },
     '.link_and_description'); // Target element which will have the event delegated.

デモ

.on()のドキュメントを参照してください。

もう 1 つのポイントは$(function () {document.ready 自体であるため、マウスオーバー イベントをラップする準備ができている別のドキュメントを含める必要はありません。

mouseover/mouseout の代わりに mouseenter/mouseleave を使用します。以下の理由による。

ドキュメントから

mouseenter イベントは、イベントのバブリングを処理する方法が mouseover とは異なります。この例でマウスオーバーが使用された場合、マウス ポインターが内部要素の上に移動すると、ハンドラーがトリガーされます。これは通常、望ましくない動作です。一方、mouseenter イベントは、マウスが子孫ではなく、バインドされている要素に入ったときにのみハンドラーをトリガーします。したがって、この例では、マウスがアウター要素に入ったときにハンドラーがトリガーされますが、インナー要素にはトリガーされません。

于 2013-06-05T03:40:52.303 に答える
1

オブジェクトが追加されたときに、mouseover & mouseout イベントをバインドする必要があります。

したがって、div を追加した後、次のように実行します。

$('#foo').bind('mouseover',function() { $(this).css('background', '#fef4a7'); });

#foo新しく作成された要素はどこにありますか。.bind() の詳細については、http://api.jquery.com/bind/ を参照してください。

于 2013-06-05T03:41:18.680 に答える