Question

我有一个可排序的列表（jQuery UI），我希望使用它的id来以编程方式排序 “李”元素。（他们都是数字）。

要做到这一点，我已经完成了这个功能：

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悬停或鼠标悬停事件再次触发（以前一直在工作）

我的“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（）之后，为什么悬浮函数无效？

抱歉英文不好，谢谢你的帮助！

-Nick

Answer 1

我很确定在对元素进行排序后，新的dom元素会添加到您的页面中，替换旧的元素。因此，您的事件处理程序会丢失。您应该能够通过使用on

的委托事件轻松修复它

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

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

Answer 2

如果您使用的是jquery 1.7或更高版本，请使用.on else使用.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");
        }
});

你是对的，改为委派

Dafen，悬停不会使用javascript动态创建的工作元素，因此使用.on或委托，无论如何你已找到答案，只是纠正我的答案，以便没有人犯同样的错误。

Answer 3

虽然困难，但整数不是有效的HTML ID（ID应以字母[A-Za-z]开头）

使用.empty（）和.html（）之后没有悬停事件

3 个答案: