5

AJAX 呼び出しから作成された要素がいくつかあります。これらの要素内には、ホバーしたときに動的に作成された別の子要素を表示する必要がある子要素があります。.hoverjquery をフィドルで実行すると、正常に動作します。コードに実装すると、動作したくありません。

.hoverスクリプトがロードされるタイミングと、要素が AJAX からロードされるタイミングに依存するかどうか疑問に思っていました。一方が他方より先に進む必要がありますか? スクリプトを実行する.promise前に、AJAX 要素が読み込まれるのを待つように設定する必要がありますか?.hover

これが私の例のフィドルです。

4

7 に答える 7

10

動的に生成された要素の場合、イベントは、要素またはドキュメント オブジェクトの静的な親の 1 つから委任する必要があります。onまたはdelegateメソッドを使用できます。

$(document).on({
    mouseenter: function() {
        $(this).next('.show').fadeIn(800);
    },
    mouseleave: function() {
        $(this).next('.show').delay(800).fadeOut(800);
    }
}, '.touch');
于 2012-12-27T15:06:53.867 に答える
6

あなたの質問は、まだ存在しない可能性のある要素にイベントを関連付けているという意味だと理解しています。要素 (の短縮形) にバインドする代わりに.hover()、永続的なコンテナー要素に委任する必要があります。delegate()これは、jQuery のバージョンまたは.on()jQuery のバージョンに応じて行うことができます。

フィドルでは次のようになります。http://jsfiddle.net/7dcuh/15/

于 2012-12-27T15:07:12.003 に答える
2

ajax 応答内にスクリプトを挿入するようにしてください。お気に入り 

 <script> </script>

または、ajax 呼び出しが完了または成功したときにスクリプトを提供します

jQuery.ajax({

success:function(){jQuery('selector').yourfunction();},

        });

そうしないと、スクリプトが実行され、dom でセレクターが見つからず、スクリプトが再度実行されません。

于 2012-12-27T15:14:20.053 に答える
1

.on() 関数を使用して遅延イベントをチェックアウトします。次のようなイベントを実行できます。

$('#parent').on('hover', '.touch', function() {
    $(this).next('.show').fadeIn(800);
},
function(){
    $(this).next('.show').delay(800).fadeOut(800);
});

または、純粋な CSS ソリューションは次のようになります。

.touch + .show {
    display:none;
}
.touch:hover + .show {
    display:block;
}
于 2012-12-27T15:08:11.180 に答える
0

要素を挿入した後、AJAX の成功コールバックで .hover スクリプトを実行する必要があります。

于 2012-12-27T15:05:44.407 に答える
0

コンテンツが Ajax で生成されている場合は、livequeryを使用する必要があります

于 2012-12-27T15:05:54.187 に答える
0

これは正しい答えではないかもしれませんが、関数内で作成される要素を見つけました。関数内でセレクターを宣言する必要があります。そのようです：

function createEle(){
    $('#element').after('<div id="newEle"><div id="inner" style="display:none;"></div></div>');
    $('#newEle').hover(function(){
        $('#inner','#newEle').show();
    },function(){
        $('#inner','#newEle').hide();
    });
}
于 2012-12-27T15:07:52.013 に答える