Нет события наведения после того, как я использовал .empty() и .html()

У меня есть сортируемый список (пользовательский интерфейс jQuery), который я хочу отсортировать программно, используя идентификаторы элементов «li». (это все числа).

Для этого я сделал эту функцию:

function resetList()
{
   var orderedItems = new Array();
   var unorderedItems = $("#sortable").find('li');

   for(var i = 0; i < unorderdItems.length; i++)
   {
       var counter = 0;
       var check = false;
       do {

           if(unorderedItems[counter].id == (i+1))
           {
                check = true;
                orderedItems.push(unorderedItems[counter]);                   
           }
           counter++;  

       } while (!check && counter < unorderedItems.length);
    } 

    $("#sortable").empty().html(orderedItems);           
}

Я думаю, что это работает довольно хорошо (я новичок в javascript, поэтому я не знаю, является ли этот код «профессиональным»)

Проблема в том, что после того, как я вызвал функцию, события jQuery hover или mouseover больше не срабатывают (ранее работали)

Содержимое моих элементов "li":

<li class="ui-state-default">
    <div class="image" style=\"height:100%; width:100%;">
        <img class="overlay" src="img/pic.png" height="200" width="200" style="height:200px; width:200px; visibility:hidden;" />
    </div>;
</li>

JavaScript:

$(".image").hover(function(e)
{
//make overlay visible  
}, function(e) 
{       
//hide overlay      
});

Любые идеи, почему функция наведения не работает после того, как я вызвал resetList()?

Извините за плохой английский и спасибо за любую помощь!

-Ник


javascript html jquery jquery-ui-sortable jquery-hover
person Dafen    schedule 31.07.2012    source источник
comment
Когда вы устанавливаете наведение в JavaScript, вы привязываете его к элементу, существующему в данный момент. Варианты: Установите наведение еще раз. Проверьте jquery.live или сделайте это с помощью css.   -  person René    schedule 31.07.2012
comment
Я предполагаю, что это потому, что вы удаляете элемент, к которому применена функциональность hover, и воссоздаете его. Я предполагаю, что, поскольку вы уничтожаете все эти элементы с помощью своего .empty(), вам придется повторно применить любой код, который вы используете, чтобы применить функцию наведения в первую очередь.   -  person Jared    schedule 31.07.2012
comment
@ReneGeuze Функция jQuery .live() уже давно устарела. .on() для jQuery 1.7+, иначе .delegate().   -  person Anthony Grist    schedule 31.07.2012
comment
Я не имел в виду настоящую функцию live(). По какой-то причине я предпочитаю называть его живым с любым именем функции, которое у него есть.   -  person René    schedule 31.07.2012

Ответы (3)


arrow_upward
0
arrow_downward

если вы используете jquery 1.7 или выше, используйте .on, иначе используйте .delegate

$(".image").on("mouseover mouseout",function(evt){
    if (evt.type == 'mouseover') {
           // do something on mouseover
        alert("over");
      } else {
        // do something on mouseout
        alert("out");
      }
     });

более ранняя версия jquery

$("body").delegate(".image","hover",function(evt){
    if (evt.type == 'mouseenter') {
        // do something on mouseover
        alert("over");
    }else {
        // do something on mouseout
        alert("out");
        }
});

вы правы, изменено на делегирование

Дафен, при наведении курсора не будут работать элементы, которые динамически создаются из javascript, следовательно, используется .on или делегат, в любом случае вы нашли свой ответ, просто исправив мой ответ, чтобы никто не сделал ту же ошибку, что и я.

person Vanamali    schedule 31.07.2012
comment
Более ранние версии jQuery должны использовать .delegate(), а не .live(), если только вы не настолько отстали, что у вас нет .delegate() (в этом случае вам действительно нужно обновить). Функция .live() устарела в течение месяцев, и в документации четко указано (во многих местах), что .delegate() является предпочтительной функцией для версий jQuery до 1.7. - person Anthony Grist; 31.07.2012
comment
$(.image).on(hover,function() {}); лучше, чем .hover()? - person Dafen; 31.07.2012

arrow_upward
0
arrow_downward

Я почти уверен, что после того, как вы отсортируете свои элементы, на вашу страницу будут добавлены новые элементы dom, заменяющие старые. В результате ваши обработчики событий теряются. Вы сможете легко исправить это, используя делегированные события с on

$(".ui-state-default").on("mouseenter", ".image", function() { .....

$(".ui-state-default").on("mouseleave", ".image", function() { .....
person Adam Rackis    schedule 31.07.2012
comment
Спасибо, сэр! Работает как шарм! :-) - person Dafen; 31.07.2012
comment
Рад это слышать, @Dafen. Если какой-либо ответ здесь помог, вы можете щелкнуть галочку рядом с ним, чтобы указать, что на вопрос дан ответ. - person Adam Rackis; 31.07.2012

arrow_upward
0
arrow_downward

Просто для сложности: целые числа не являются допустимыми идентификаторами HTML (идентификаторы должны начинаться с буквы [A-Za-z])

person Patrick Clancey    schedule 31.07.2012