1

だから私はこれを使っていくつかのdivを生成します

document.getElementById('container').innerHTML += '<div class="colorBox" id="box'+i+'"></div>';

私が直面している問題は、ホバーイベントをキャッチすることです

$(".colorBox").hover(function(){
    alert("!");
});

それをした後は動作しません。何かご意見は？

編集:より明確にするために、これをチェックしてください: http://graysonearle.com/test/16_t.html

動的に何度も発生するinnerHTMLを変更した後、ホバーイベントを発生させる必要があります。列の数を変更した後のように、ホバー効果が機能する必要があります。

選択した回答に感謝します: 将来、同様のことをしたいと思うかもしれない人のために、私のコードは次のようになります:

$(document).ready(function(){

    document.body.onmousedown = function() { 
      ++mouseDown;
    }
    document.body.onmouseup = function() {
      --mouseDown;
    }

    $(document).on("mouseenter",".colorBox",function(){
        if(mouseDown){
            var clicked = $(this).attr("id");
            var clicked = clicked.substring('box'.length);
            next_color(clicked);
        }       
        $(this).css("border-color","#ff0");
        }).on("mouseleave", ".colorBox", function() {
        $(this).css("border-color","#aaa");
    });

    $(document).on("click",".colorBox",function(){
        var clicked = $(this).attr("id");
        var clicked = clicked.substring('box'.length);
        next_color(clicked);
    });
});
4

3 に答える 3

4

サーバー側コードまたはクライアント側コードから DOM を更新するたびに。EX用。更新中の DIV は、その部分データをロードすると、以前にロードしたイベントでは機能しません。

このため、このようなドキュメント対応コードで。jquery 1.7+を使用している場合は、次のようなコード

$(document).on("hover",".colorBox",function(){
    alert("Hi it will load after partial div update as well");
});

$(document).delegate(".colorBox","hover",function(){
    alert("Hi it will load after partial div update as well");
});

jquery 1.6以下を使用している場合は、それ。

次に使用します

$(".colorBox").live("hover",function(){
    alert("Hi it will load after partial div update as well");
});

http://oscarotero.com/jquery/

これが役に立った場合は、回答としてマークしてください。

于 2013-02-27T00:07:57.143 に答える
1

まず、jQuery を使用しているため、最初のコードは以下の関数を使用して簡略化できます。

$('#container').append('<div class="colorBox" id="box'+i+'"></div>');

次に、ホバーオフ機能を宣言していないためだと思います。

 $(".colorBox").hover(
       function(){
          alert("On");
       }
    );

働くフィドル

于 2013-02-26T23:59:20.157 に答える
0

divを挿入した後、ホバーコードを呼び出す必要があります。Jquery は dom の変更を自動的にリッスンしないため、すべての colorBox をフックして$(document).ready(){...}新しい div を挿入しても、何も起こりません。

したがって、これはうまく機能します：

$(document).ready(function(){
    for(i=0; i<5; i++) {
        document.getElementById('container').innerHTML += '<div class="colorBox" id="box'+i+'"></div>';
    }
    $(".colorBox").hover(function(){
        alert("!");
    });
}
于 2013-02-27T00:00:58.270 に答える