1

「li」要素のIDを使用してプログラムで並べ替えたい並べ替え可能なリスト（jQuery UI）があります。（これらはすべて数字です）。

それを行うために、私はこの関数を作成しました：

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

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、ホバーはjavascriptから動的に作成された要素を機能させないため、.onまたはdelegateを使用して、とにかく答えを見つけました。私の答えを修正して、私が行ったのと同じ間違いをしないようにします。

于 2012-07-31T15:13:17.033 に答える
0

要素を並べ替えると、新しいdom要素がページに追加され、古い要素が置き換えられると確信しています。その結果、イベントハンドラーが失われます。委任されたイベントを使用して、非常に簡単に修正できるはずです。on

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

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

難しいことに、整数は有効なHTML IDではありません（IDは文字[A-Za-z]で始まる必要があります）

于 2012-07-31T15:19:55.773 に答える