0

<divホバーしたときに>タグの背景色をアニメーション化する（そしてホバーしなくなったときにそれらを元に戻す）jQueryがいくつかあります。

$('.row').hover(function() {
    $(this).stop().animate({
        backgroundColor: "#000000"
    }, 250 );
}, function () {
    $(this).stop().animate({
        backgroundColor: "#15181A"
    }, 250 );
});

<divそして、次のように、いくつかの追加の>をロードするためにページにAJAX呼び出しがあります。

$.ajax({
    type : 'POST',
    url : "ajax.php",
    dataType : 'json',
    data: {
        query : $('#search').val()
    },
    success : function(data) {
        if (data.error === true) {
            // Error
        } else {
            $('#more').html(data.msg);
        }
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
        // Error
    }
});

AJAX呼び出しは<div、「行」のクラスでより多くの>を効果的に返しますが、それらがホバーされたとき、jQueryは背景色をアニメーション化しません。これらの行がAJAX経由でロードされたとしても、jQueryでこれらの行を選択することは可能ですか？

編集：AJAX呼び出しajax.phpによって返されるものは次のとおりです。

<?php
$return['error'] = false;
$return['msg'] = '<div class="row" style="background: #15181A;">A row...</div>';
$return['msg'] = '<div class="row" style="background: #15181A;">Another row...</div>';
$return['msg'] = '<div class="row" style="background: #15181A;">Another row...</div>';
echo json_encode($return);
return;
?>
4

4 に答える 4

3

動的要素には、委任されたイベント ハンドラーが必要です。

$('#more').on({
    mouseenter: function() {
        $(this).stop().animate({
            backgroundColor: "#000000"
        }, 250 );
    },
    mouseleave: function() {
        $(this).stop().animate({
            backgroundColor: "#15181A"
        }, 250 );
    }
}, '.row');
于 2013-03-20T01:27:05.073 に答える
3

それを要素にバインドします#more。

$("#more").on("mouseenter mouseleave", ".row", function(e){
  if(e.type == "mouseenter"){ 
    // your hover code
  }else{
    // your off-hover code
  }
});
于 2013-03-20T01:27:33.670 に答える
0

$('.row').hover(function() ...AJAX 成功関数でを思い出す必要があります。

于 2013-03-20T01:28:25.330 に答える
0

これはおそらく、AJAX 要求からの新しいコンテンツをページに実際に追加する前に、ホバー効果を設定するメソッドを呼び出しているためです。

たとえば、次のようなものです。

success: function (data) {
    if (data.error === true) {
        // Error
    } else {
        $('#more').html(data.msg);
        $('.row').hover(function () {
            $(this).stop().animate({
                backgroundColor: "#000000"
            }, 250);
        }, function () {
            $(this).stop().animate({
                backgroundColor: "#15181A"
            }, 250);
        });
    }

.rowAJAX リクエストの成功でセレクターに一致する新しい要素を追加する場合。

于 2013-03-20T01:27:22.250 に答える