jQuery：更改加载了 ajax 的元素上的 CSS？

Posted 2023-05-08

【中文标题】jQuery：更改加载了 ajax 的元素上的 CSS？

【英文标题】：jQuery: Changing the CSS on an element loaded with ajax?

【发布时间】：2011-10-15 12:20:27

【问题描述】：

我需要使用ajax 更改正在加载的元素的位置。我想使用.css() 来更改它，但是 jQuery 找不到该元素，因为它没有被识别。如何让 jQuery “识别”元素？

我已经阅读了有关 live() 和 delegate() 的信息，但我无法让它们中的任何一个都按照我的意愿工作。非常感谢您的帮助！

【问题讨论】：

请发布您的代码，现场直播并委托活动进行工作

【参考方案1】：

在 ajax 调用的 complete 或 success 函数中更改 css。假设您使用的是load：

$('#el').load(
    url,
    data,
    function()
        $('#selector').css('position', 'absolute');
    
);

另外（更容易举个例子）注册一个ajaxComplete事件

$(document).ajaxComplete(function()
    if($('#elementID').length != 0) 
        $('#elementID').css('position', 'absolute');
    
);

每次 ajax 请求完成时都会触发，检查 #elementID 是否存在，如果存在则应用 css。

【讨论】：

我现在写代码显然太累了。我一定是拼错了什么，因为我尝试这样做，但它对我不起作用。哦，好的，谢谢！

好的。添加一些代码或将其粘贴在 jsfiddle 上，以便我看一下。欢迎使用 Stack！

没有问题@RIK，很高兴我能帮上忙！

如果您无法控制 ajax 部分怎么办？

啊，找到了：$(document).ajaxSuccess(function() ... );，它监听所有 ajax 传输。与上述$(document).ajaxComplete(function());

类似

【参考方案2】：

如果您必须在 js 变量中进行标记，那么您可以按照以下方式进行。

$(markup).find("requiredElement").css( set the properties here );

【讨论】：

公平地解释我的反对意见 - OP 说他正在尝试将 css 应用于使用 ajax 加载的元素。他显然知道如何遍历 dom 和设置 css，只是不作为 ajax 请求的一部分。

我对他投了赞成票，因为我喜欢从 ajax 接收 html 并在它被加载到 DOM 之前对其进行操作的解决方案。我不知道它是否可以节省周期。

啊。我假设用户正在使用.load，这似乎是使用 ajax 将元素放入页面的最简单方法。不知道能不能拦截load调用中的元素。

@adam - OP 在“Jquery 无法识别元素”的问题中明确提到，明确表示他不知道 jquery 如何在 dom 中查找元素。我认为你的反对票完全不公平。

好的 - 编辑答案，我会删除它（上次编辑后 10 小时内不能更改投票）

【参考方案3】：

如果你想编辑它的 CSS，你需要先把它放在 DOM 中，然后再对其进行操作。

例子：

$.ajax(
    ...
    success:function(data)
        $('<div/>').appendTo('body').html(data).css('border','3px solid red');
    
);