jQuery中.prepend方法的问题

I have a function that prepends a li tag to a parent div just fine...however, after the prepend, i want to act upon this prepended list item by changing css properties when hovered on but the jQuery selector can't find it (seemingly because the .hover function is searching for list items available to act upon when the page loads..and the prepended items are nonexistent when the page loads).

我有一个函数,可以将li标签预先设置为父div ...但是,在prepend之后,我想通过在hovered上更改css属性来处理这个前置列表项但是jQuery选择器找不到它(似乎是因为.hover函数正在搜索可用于在页面加载时执行的列表项。当页面加载时,前置项目不存在)。

My prepend code looks like this:

我的前置代码如下所示:

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

while my hover code (not working) looks like this:

而我的悬停代码(不工作)看起来像这样:

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

any help would be greatly appreciated!! thanks in advance

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

3 个解决方案

#1

If you are dynamically inserting an element after the hover event has already been assigned on the page load, you can use live() in that situation (jQuery 1.4.1 or greater required for 'hover' parameter):

如果在页面加载上分配了悬停事件后动态插入元素,则可以在该情况下使用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:''}); 
        }
});

#2

Are you executing this line...

你在执行这条线吗?

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

After this one...

在这之后......

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

If so it should be there.

如果是这样的话应该在那里。

Also check out the live() method. here

另请查看live()方法。这里

#3

The code you're showing doesn't actually prepend anything, so I'm assuming that you just left it out for ease of posting. (We can help you much better if you post actual working code, though.)

你展示的代码实际上并没有任何前置代码,所以我假设你只是为了便于发布而把它留下来。 (但是,如果您发布实际工作代码,我们可以帮助您更好。)

Then, make sure that your hover code is running after the prepend code. If that isn't happening, you'll need to adjust things somehow. (Maybe with setTimeout(...).)

然后,确保您的悬停代码在前置代码之后运行。如果没有发生这种情况,你需要以某种方式调整事物。 (也许使用setTimeout(...)。)

JQuery's live() could help, but version 1.3.x doesn't support "hover" in the live() binding.

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

#1