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

Posted 2023-05-09

【中文标题】以 AJAX/JSON 返回的 HTML 中的 jQuery 选择器 [重复]

【英文标题】：jQuery Selectors in HTML returned in AJAX/JSON [duplicate]

【发布时间】：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;
?>

【参考方案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() ...。