0

以下は私が取り組んでいるコードです、私は問題なく .mouseenter(function () { を使用しています... .live() を使用すると、イベントが既存および新しいdom要素に適用されることを読んでいますが、なんらかの理由で関数がまったく機能しなくなりました。構文に何か問題がありますか?

    $(document).ready(function(){
    $("div#rows div.row div:nth-child(1)",this).nextUntil('nth-child(2)').on("mouseenter", function() {
        $('img',this).stop().animate({"bottom":"0px"}, "fast"); 
    });
    $('div',this).off("mouseleave").on("mouseleave", function() {
        $('img',this).stop().animate({"bottom":"94px"}, "fast");    
    });

});

$(document).ready(function(){
    $("div#rows div.row div:nth-child(3)",this).nextUntil('nth-child(4)').on("mouseenter", function() {
        $('img',this).stop().animate({"bottom":"0px"}, "fast"); 
    });
    $('div',this).off("mouseleave").on("mouseleave", function() {
        $('img',this).stop().animate({"bottom":"99px"}, "fast");    
});

});

.live の代わりに .on を使用するようにコードを更新しました... アニメーションは最初の一連の投稿で動作していますが、ページネーションで ajax がロードしたすべてのものはまだイベントをトリガーしていません...

<div id="content">

    <div id="rows">


<div class="row row-1">    
    <div class="loop-0 post-66">
        <div class="post_data">
            <div class="icons_right">
                <a type="readmore" href="http://samplewebsite.com/?p=66" rel="bookmark" title="Permanent Link to Salina Cruz | Mexico"><img src="http://samplewebsite.com/wp-content/themes/sample_website/images/pop_out_icon.png" alt="pop out icon" type="readmore" /></a>
            </div>
            <h1 class="post_title">
                <a href="http://samplewebsite.com/?p=66" rel="bookmark" title="Permanent Link to Salina Cruz | Mexico">
                Salina Cruz | Mexico</a>
            </h1>
            <h2 class="post_snippet">Lorem ipsum dolor</h2>
            <p class="post_date">May 13th, 2012 by <a href="http://samplewebsite.com/?author=1" title="Posts by admin" rel="author">admin</a></p>
        </div> <!-- post_data //-->
        <a href="http://samplewebsite.com/?p=66" rel="bookmark" title="Permanent Link to Salina Cruz | Mexico"><img width="1600" height="1200" src="http://samplewebsite.com/wp-content/uploads/2012/05/surfer3.jpg" class="attachment-post-image wp-post-image" alt="surfer3" title="surfer3" /></a>
    </div>  <!-- 1 //-->

    <div class="loop-1 post-62">
        <div class="post_data">
            <div class="icons_right">
                <a type="readmore" href="http://samplewebsite.com/?p=62" rel="bookmark" title="Permanent Link to Wakeboard Rails | Quick Silver"><img src="http://samplewebsite.com/wp-content/themes/sample_website/images/pop_out_icon.png" alt="pop out icon" type="readmore" /></a>
            </div>
            <h1 class="post_title">
                <a href="http://samplewebsite.com/?p=62" rel="bookmark" title="Permanent Link to Wakeboard Rails | Quick Silver">
                Wakeboard Rails | Quick Silver</a>
            </h1>
            <h2 class="post_snippet">Lorem ipsum dolor</h2>
            <p class="post_date">May 13th, 2012 by <a href="http://samplewebsite.com/?author=1" title="Posts by admin" rel="author">admin</a></p>
        </div> <!-- post_data //-->
        <a href="http://samplewebsite.com/?p=62" rel="bookmark" title="Permanent Link to Wakeboard Rails | Quick Silver"><img width="1280" height="1024" src="http://samplewebsite.com/wp-content/uploads/2012/05/wakeboard1.jpg" class="attachment-post-image wp-post-image" alt="wakeboard1" title="wakeboard1" /></a>
    </div>  <!-- 1 //-->

    <div class="loop-2 post-59">
        <div class="post_data">
            <div class="icons_right">
                <a type="readmore" href="http://samplewebsite.com/?p=59" rel="bookmark" title="Permanent Link to Jeremy Johnston | Florida"><img src="http://samplewebsite.com/wp-content/themes/sample_website/images/pop_out_icon.png" alt="pop out icon" type="readmore" /></a>
            </div>
            <h1 class="post_title">
                <a href="http://samplewebsite.com/?p=59" rel="bookmark" title="Permanent Link to Jeremy Johnston | Florida">
                Jeremy Johnston | Florida</a>
            </h1>
            <h2 class="post_snippet">Lorem ipsum dolor</h2>
            <p class="post_date">May 13th, 2012 by <a href="http://samplewebsite.com/?author=1" title="Posts by admin" rel="author">admin</a></p>
        </div> <!-- post_data //-->
        <a href="http://samplewebsite.com/?p=59" rel="bookmark" title="Permanent Link to Jeremy Johnston | Florida"><img width="1280" height="1024" src="http://samplewebsite.com/wp-content/uploads/2012/05/surfer6.jpg" class="attachment-post-image wp-post-image" alt="surfer6" title="surfer6" /></a>
    </div>  <!-- 1 //-->

    <div class="loop-3 post-56">
        <div class="post_data">
            <div class="icons_right">
                <a type="readmore" href="http://samplewebsite.com/?p=56" rel="bookmark" title="Permanent Link to Caribbean Waters | Duck Dive"><img src="http://samplewebsite.com/wp-content/themes/sample_website/images/pop_out_icon.png" alt="pop out icon" type="readmore" /></a>
            </div>
            <h1 class="post_title">
                <a href="http://samplewebsite.com/?p=56" rel="bookmark" title="Permanent Link to Caribbean Waters | Duck Dive">
                Caribbean Waters | Duck Dive</a>
            </h1>
            <h2 class="post_snippet">Lorem ipsum dolor</h2>
            <p class="post_date">May 13th, 2012 by <a href="http://samplewebsite.com/?author=1" title="Posts by admin" rel="author">admin</a></p>
        </div> <!-- post_data //-->
        <a href="http://samplewebsite.com/?p=56" rel="bookmark" title="Permanent Link to Caribbean Waters | Duck Dive"><img width="1280" height="960" src="http://samplewebsite.com/wp-content/uploads/2012/05/girl2.jpg" class="attachment-post-image wp-post-image" alt="girl2" title="girl2" /></a>
    </div>  <!-- 1 //-->

html が追加されました:\

4

2 に答える 2

2

委譲リスナーとしてこれを行うには、最初のセレクターが Ajax コンテンツの先祖である必要があります。ajax 呼び出しが行われたときに決して破棄されないもの。

$('#neverDestroyed').on('mouseenter', '.actualTarget', function() {
  // stuff happens when .actualTarget has mouse enter it
});

正直に言うと、コードは少し「長すぎて読めませんでした」ですが、上記を独自のセレクターに適用すると解決するはずです。

于 2012-05-19T07:50:46.440 に答える
2

何をしようとしているのかはまだよくわかりませんが、本当に必要なドキュメントは 1 つだけです。最初の子を 2 番目の子まで選択するとどうなるかわかりません。 、アニメーション化された値が変更された場合は、値の配列を使用し、要素のインデックス、ID、またはその他のものに基づいて正しい値を取得します。

$(document).ready(function(){
    var elms = $("#rows > .row").children();
    var ani = ['94', '94', '99', '99'];

    $(document).on({
        mouseenter: function(e) {
            $('img', e.target).stop().animate({"bottom":"0px"}, "fast"); 
        },
        mouseleave: function(e) {
            var i = $(this).index();
            $('img', e.target).stop().animate({"bottom": ani[i]}, "fast");
        }
    }, elms);
});
于 2012-05-19T07:55:53.100 に答える