0

次のようなHTML ulタグがあります。

<div id="sidebar"> 
    <ul id="menu">
        <li>
            <div id="clickable">
                <img src="img/img8.png" alt="Descripción de la igen 8.png">/img>
            </div>
        </li>
        <li>
            <div id="clickable">
                <img src="img/img10.png" alt="Descripción de la imagen 10"></img>
            </div>
        </li>
     </ul>
</div>

これは一般的なリストで、スライダーとして表示されます。ご覧のとおり、各画像は div 内にあり、クリックして別の div に表示できます。

わかりました、私はこの他のリストを持っています:

<div id="seleccion_galeria">Selecciona la secci&oacute;n que te gustar&iacute;a visualizar:</div>
            <div id="lista_galerias">
                <ul>
                    <li><div id="escaparates_show">Escaparates</div>
                        <script type="text/javascript">
                            $('#escaparates_show').click(function()
                            {
                                console.log('clicked');
                                $('#menu').html('');
                                $('<li><div id="clickable"><img src="img/img8.png" alt="Descripción de la imagen 8."></img></div></li><li><div id="clickable"><img src="img/img10.png" alt="Descripción de la imagen 10"></img></div></li><li><div id="clickable"><img src="img/img13.png" alt="Descripción de la imagen 13"></img></div></li><li><div id="clickable"><img src="img/img15.png" alt="Descripción de la imagen 15"></img></div></li><li><div id="clickable"><img src="img/img20.png" alt="Descripción de la imagen 20"></img></div></li>')
                                    .prependTo('#menu');
                                $('#galeria_seleccionada').html('Escaparates');
                            });
                        </script>
                    </li>
                    <li><div id="decoracion_show">Decoraci&oacute;n</div>
                        <script type="text/javascript">
                            $('#decoracion_show').click(function()
                            {
                                console.log('clicked');
                                $('#menu').html('');
                                $('<li><div id="clickable"><img src="img/img8.png" alt="Descripción de la imagen 8."></img></div></li><li><div id="clickable"><img src="img/img10.png" alt="Descripción de la imagen 10"></img></div></li>')
                                    .prependTo('#menu');
                                $('#galeria_seleccionada').html('Decoración');
                            });
                        </script>
                    </li>
     </ul>
</div>

これは、この最後のリストの各要素に含まれる可能性のある画像を示すリストです。リストの各要素をクリックすると、最初のul "#menu" リストの html が消去され、必要なコンテンツに置き換えられます。これにより、別の div でクリックおよび展開可能な画像のさまざまなリストを表示できます。

問題は、コンテンツを新しいリストに置き換えると、画像の新しいリストが完全に表示されますが、 「クリック可能」イベントを継承しないため、HTML タグを初めて置き換えると、クリック可能でなくなることです。 .

なぜこれが起こるのか、誰でも考えられるでしょうか？

ありがとう！

編集：

同じ問題について、次の jquery イベントがあります。

$('#menu').on("hover", '#menu li', 
function() {    
//mouse over LI and look for A element for transition
$(this).find('img')
    .animate( { opacity:1 }, 200)
});

継承されたすべての要素で機能しますが、「mouseleave」イベントを継承させることはできません。私が追加した場合：

        $('#menu').on("hover", '#menu li', 
    function() {    
        //mouse over LI and look for A element for transition
        $(this).find('img')
            .animate( { opacity:1 }, 200)
    },
    function() {
        $(this).find('img')
            .animate( { opacity:0.5 }, 200)
    });

うまくいきません。ホバーオンリーブイベントでどのように機能しますか??

4

3 に答える 3

2

DOM から要素を削除すると、その要素にバインドされているイベント ハンドラーは機能しなくなります。イベント デリゲーションを使用して、常に DOM に存在する祖先要素にイベント ハンドラーをバインドする必要があります。on次のメソッドでこれを行うことができます。

$("#menu").on("click", ".clickable", function() {
    //Do stuff
});

ulこれにより、イベント ハンドラーが親要素にバインドされます。ほとんどの DOM イベントはツリーをバブルアップするため、祖先要素でキャプチャできます。イベントが に到達するulと、onメソッドはセレクターに一致する要素で発生したかどうかを確認します。その場合、イベント ハンドラが実行されます。

これには、多くのイベント ハンドラー (要素ごとに 1 つ.clickable) ではなく 1 つのイベント ハンドラーしかないという追加の利点があり、より効率的です。

于 2012-06-12T09:06:42.510 に答える
1 
    $('.clickable').live('click',function(){
      //do stuff here
    });
OR

$('body').delegate('.clickable','click',function(){
  //do stuff here
});
于 2012-06-12T09:08:36.520 に答える
0

イベントのバインドには .on メソッドを使用します。これにより、イベントの委任が可能になります。ここを参照してください。

エキス：

「委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされた時点で存在することが保証されている要素を選択することで、委任されたイベントを使用できます。イベント ハンドラーを頻繁にアタッチおよび削除する必要がないようにします。"

于 2012-06-12T09:06:54.067 に答える