jQuery 中 .prepend 方法的问题

Posted 2023-04-13

【中文标题】jQuery 中 .prepend 方法的问题

【英文标题】：Problems with .prepend method in jQuery

【发布时间】：2010-02-25 18:26:28

【问题描述】：

我有一个函数可以将 li 标签添加到父 div 就好了......但是，在添加之后，我想通过在悬停时更改 css 属性来处理这个前置列表项，但 jQuery 选择器不能找到它（似乎是因为 .hover 函数正在搜索页面加载时可用的列表项。页面加载时前置项不存在）。

我的前置代码如下所示：

$("div#content-text div#sub-text").prepend(
"<li id='item1' class='contents-rec'><div class='text'></div></li>");

虽然我的悬停代码（不工作）看起来像这样：

$("div#content-text div#sub-text li.contents-rec").hover(function()
$(this).css(border:'1px solid #fff');
, function()
$(this).css(border:'');
,0);

任何帮助将不胜感激！提前致谢

【问题讨论】：

.live() 有效！！！唯一的问题（可能是因为 .live() 更改了 .hover 语法）是悬停在 li.contents-rec 上会将边框更改为 1px solid #fff 但当我悬停时不会将其更改回来。 $("div#content-text div#sub-text li.contents-rec").live('hover', function() $(this).css(border:'1px solid #fff'); , function() $(this).css(border:'0px solid #000'); );

我更新了我的答案。显然live() 想要一个功能而不是两个。

【参考方案1】：

如果您在页面加载时已分配悬停事件后动态插入元素，则可以在这种情况下使用live()（'hover' 参数需要 jQuery 1.4.1 或更高版本）：

$("div#content-text div#sub-text li.contents-rec").live('hover',
    function(event)  
        if (event.type == 'mouseover') 
            $(this).css(border:'10px solid orange'); 
         else 
            $(this).css(border:''); 
        
);

【讨论】：

.live() 有效！！！唯一的问题（可能是因为 .live() 更改了 .hover 语法）是悬停在 li.contents-rec 上会将边框更改为 1px solid #fff 但当我悬停时不会将其更改回来。 f.y.i - 我不需要发布代码，因为它与上面的 Patrick 完全相同。

对不起。我已经更新了我的答案。我以为live('hover',...) 会接受两个功能。显然不是。 （至少 1.4.2 不能那样工作。）参见上面的代码。

【参考方案2】：

你在执行这一行吗……

$("div#content-text div#sub-text li.contents-rec").hover(function() $(this).css(border:'1px solid #fff'); , function() $(this).css(border:''); ,0);

在这之后……

$("div#content-text div#sub-text").prepend( "");

如果是这样，它应该在那里。

还可以查看 live() 方法。 here

【参考方案3】：

您显示的代码实际上并没有预先添加任何内容，因此我假设您只是为了方便发布而将其省略了。 （不过，如果您发布实际的工作代码，我们可以为您提供更好的帮助。）

然后，确保悬停代码在前置代码之后运行。如果这没有发生，您将需要以某种方式进行调整。 （也许使用 setTimeout(...)。）

JQuery 的 live() 可以提供帮助，但 1.3.x 版本不支持 live() 绑定中的“悬停”。

【讨论】：

我猜正在附加的<li> 标记不可见，因为代码文本未格式化为代码。

f.y.i 我的代码确实预先添加了整个 li 标签...