以 AJAX/JSON 返回的 HTML 中的 jQuery 选择器 [重复]答案

【问题标题】：jQuery Selectors in HTML returned in AJAX/JSON [duplicate]以 AJAX/JSON 返回的 HTML 中的 jQuery 选择器 [重复]
【发布时间】：2013-03-08 23:07:33
【问题描述】：

我有一些 jQuery，它可以在悬停时为 <div> 标签的背景颜色设置动画（并在不再悬停时恢复它们）。

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

我的页面上有一个 AJAX 调用来加载一些额外的<div>，如下所示：

$.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>s，但是当它们悬停时，jQuery 不会为其背景颜色设置动画。是否可以使用 jQuery 选择这些行，即使它们是通过 AJAX 加载的？

编辑：这是 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;
?>

【问题讨论】：

标签： jquery ajax jquery-selectors

【解决方案1】：

将其绑定到您的 #more 元素。

$("#more").on("mouseenter mouseleave", ".row", function(e){
  if(e.type == "mouseenter"){ 
    // your hover code
  }else{
    // your off-hover code
  }
});

【讨论】：

+1，这是这样做的方法（至少其中之一）。
不错的解决方案！ +1
谢谢 - 这回答了我的问题！

【解决方案2】：

动态元素需要委托的事件处理程序：

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

【讨论】：

谢谢！这也回答了我的问题，但我选择了 Ahren 的答案作为最好的答案，因为您对此发表了评论，说这是最好的方法（没有那个我不知道两者中哪个更好）。
@Edward - 嗯，嗯？我相信我发布的答案是最好的方法，但是关于事件委托，两个答案都是相同的，这是正确的方法，我只是直接使用事件而无需检查事件的类型.
@Edward - 是的，两者都做同样的事情，所以它归结为可读性，我想说这个答案在这方面要好得多 - 唯一的缺点是 context 参数得到一个在底部几乎没有丢失。
如果我有代表我会投赞成票:(

【解决方案3】：

这可能是因为您在实际将来自 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);
        });
    }

当您在成功的 AJAX 请求中附加与选择器 .row 匹配的新元素时。

【讨论】：

这将起作用，但请参阅@adeneo 答案以获得更好的实施。
又突然把同一个选择器的已有元素绑定了两次，导致一系列错误？
当您已经有了我上面的评论时，我认为将我的答案更正为更“正确”是没有意义的。现在是清晨，我还不够快：P。但是，就像我说的那样，这可行，但不是解决答案的好方法，而且您的答案已经提供了。
没关系，因为如果您避免多次绑定元素等，这并不总是一个糟糕的解决方案。
另外值得注意的是，确实来到此页面的人寻找可能多次犯此错误绑定元素的信息，更好的方法是根据您的答案。

【解决方案4】：

您需要在 AJAX 成功函数中调用 $('.row').hover(function() ...。

【讨论】：