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

Question

У меня есть функция, которая отлично добавляет тег li к родительскому элементу div ... однако, после prepend, я хочу воздействовать на этот предварительно добавленный элемент списка, изменяя свойства css при наведении, но селектор jQuery не может найдите его (по-видимому, потому что функция .hover ищет элементы списка, на которые можно воздействовать при загрузке страницы ... а предварительно добавленные элементы не существуют при загрузке страницы).

Мой код prepend выглядит так:

$("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);

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

Answer 1

Если вы динамически вставляете элемент после того, как событие hover уже было назначено для загрузки страницы, вы можете использовать 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:''}); 
        }
});

Answer 2

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

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

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

Answer 3

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

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