Проблемы с методом .prepend в jQuery

У меня есть функция, которая прекрасно добавляет тег 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);

любая помощь будет принята с благодарностью! заранее спасибо


jquery hover selector prepend
person sadmicrowave    schedule 25.02.2010    source источник
comment
.live() работает!!! единственная проблема (вероятно, потому что .live() изменяет синтаксис .hover) заключается в том, что наведение курсора на li.contents-rec изменяет границу на 1px сплошной #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'}); });   -  person sadmicrowave    schedule 25.02.2010
comment
Я обновил свой ответ. Очевидно, live() хочет одну функцию вместо двух.   -  person user113716    schedule 25.02.2010

Ответы (3)


arrow_upward
2
arrow_downward

Если вы динамически вставляете элемент после того, как событие наведения уже было назначено при загрузке страницы, вы можете использовать live() в этой ситуации (для параметра «наведения» требуется 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:''}); 
        }
});
person user113716    schedule 25.02.2010
comment
.live() работает!!! единственная проблема (вероятно, потому что .live() изменяет синтаксис .hover) заключается в том, что наведение курсора на li.contents-rec изменяет границу на 1px сплошной #fff, но не меняет ее обратно, когда я нахожусь. f.y.i - мне не нужно публиковать код, потому что он точно такой же, как у Патрика выше. - person sadmicrowave; 25.02.2010
comment
Извиняюсь. Я обновил свой ответ. Я думал, что live('hover',...) примет две функции. Очевидно нет. (По крайней мере, 1.4.2 так не работает.) См. приведенный выше код. - person user113716; 25.02.2010

arrow_upward
0
arrow_downward

Вы выполняете эту строку...

$("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(). здесь

person ctrlShiftBryan    schedule 25.02.2010

arrow_upward
0
arrow_downward

Код, который вы показываете, на самом деле ничего не добавляет, поэтому я предполагаю, что вы просто пропустили его для удобства публикации. (Однако мы можем помочь вам намного лучше, если вы опубликуете реальный рабочий код.)

Затем убедитесь, что ваш код наведения выполняется после кода добавления. Если этого не происходит, вам нужно как-то настроить ситуацию. (Возможно, с setTimeout(...).)

JQuery live() может помочь, но версия 1.3.x не поддерживает "зависание" в привязке live().

person John Fisher    schedule 25.02.2010
comment
Я предполагаю, что добавляемый тег <li> не виден, потому что текст кода не отформатирован как код. - person user113716; 25.02.2010
comment
f.y.i, мой код добавляет весь тег li... ‹li id='item1' class='contents-rec'›‹div class='text'›‹/div›‹/li› - person sadmicrowave; 25.02.2010