1

我有一个可排序的列表（jQuery UI），我想使用“li”元素的 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() 后悬停功能不起作用？

抱歉英语不好，感谢您的帮助！

-缺口

4

3 回答 3

0

我很确定在您对元素进行排序后，新的 dom 元素会添加到您的页面中，替换旧的。结果，您的事件处理程序会丢失。您应该能够通过使用委托事件很容易地修复它on

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

$(".ui-state-default").on("mouseleave", ".image", function() { .....
于 2012-07-31T15:08:28.380 回答
0

如果您使用 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");
        }
});

你是对的，改为委托

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

于 2012-07-31T15:13:17.033 回答
0

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

于 2012-07-31T15:19:55.773 回答