Jquery mouseover/mouseoutトリガに統一性

Question

ってソート可能リスト、ネストしたり、マウスのli要素をネストしたソート可能。私の問題は、mouseoverとmouseout機能することが求められてい統一性がユーザーにマウスを素早く、リストの子です。

っているということなのか何が起きているのは、ドラッグ、ペインのリストをドラッグ3-4テキストボックス項目の区画を見ることができる。きの2番号の右上には身体の安全を確保するため、マウス。注また私のサイトfirefoxことが明らかになるためである。

例

私のjqueryコード:

ここでは、mouseoverとmouseout機能

$(".pane > li").live("mouseover", function(){
    $("#in").html(in1);
    $(this).children(".test").stop().animate({opacity: 1},400);
    in1++;
});


$(".ペイン>li").live("mouseout",function(){
 $("#out")。html（out1);$(内にあります。子ども(".試験").stop().animate({opacity:0},400);out1++;});

$(".ペイン>li>*").live("mouseover",function(event){
 イベントです。stopPropagation();});

$(".ペイン>li>*").live("mouseout",function(event){
 イベントです。stopPropagation();});

最初のソート可能リスト：

    var counter = 0;
    var height="";
    var in1 =0;
    var out1=0;


$("#left-form-space").sortable({


更新:機能(ev,ui){
 if(!ポートします。ます。は('.noChange')){
 addNewPane(ポートします。項目);}
},
 開始:function(event,ui){
 if(ポートします。ます。は('.noChange')){
 $("#左のフォルム-スペース").css({'height'は:高});$("#左のフォルム-スペース").animate({height:"75px"},600,function(){
 $("#左のフォルム-スペース").css({'height'は:'auto'});});}
},
 停止function(event,ui){
 $item=ポートします。事項if($商品です。は('.noChange')){
 $商品です。css({'height'は:'0px'});$商品です。animate({height:"150px"},600,function(){
 $商品です。css({'height'は:'auto'});});}
},
 プレースホルダー:'.プレースホルダー-イ',
 カーソル:'移動',
 に戻すには:true
 });

$("ul, li").disableSelection();

私の機能の追加メソッドは、入れ子のリストをソート可能:

function addNewPane($item){
    counter++;
    var newID = "pane_" + counter;
    $item.attr("id", newID);


$item.html('').animate({height: "150px"}, 600, function(){
    $item.css({'height' : 'auto'});
    $item.html('<fieldset class="sortable-pane"><div class="pane-nav"><a href="link/to/recycle/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-close">Delete image</a></div><ul class="pane"></ul></fieldset>');
    $("#" + newID + " > fieldset").hide().fadeIn('slow');
    $(".pane").sortable({
        placeholder: 'ui-state-highlight',
        update: function (event, ui){
            if (!ui.item.is('.noChange')){
                if (ui.item.is('.textbox')){
                    $(ui.item).html('<div class="test ui-corner-tl ui-corner-bl">test</div><input class="label" value="First Name:"/><input name="input1" id="input1" type="text" /><div id="spacer"></div>');

                }
                if (ui.item.is('.header')){
                    $(ui.item).html('<div id="element2" class="element header"><h1>Contact Information</h1></div>');
                }
            }
        },
        cursor: 'move',
        revert: true
    });

    var newFormHeight = $("#left-form-space").height() + "px";
    height=newFormHeight;
    $item.addClass('noChange');
});


};

感謝の他案内もあります。

Answer 1

いたすべてのコードがかったので通知いただく場合、新規追加[ガまし添えます。

どの方が良いかもしれないがご利用の場合、キーワードとすることを確保すべての要素を、指定されたid/クラスなどのイベントを添付するだけで、自動的に追加の要素となります。

なので追加した場合のようにします;

$('.MyPanels').live("mouseover", function() { //do stuff });

その後の詳細を追加する要素を含むクラス名'MyPanels、mouseoverイベントになっています。

この見を保存する多くの混乱ができない追加につマウスイベントの要素をともにする必要がなく、具体的にはコードです。

ただこの修正の問題だが確実に整理整頓も、修正または曝露の問題です。

Answer 2

は受け付けていません妄の方法ではなく、mouseoverはmouseout法で推移しないを伝搬するイベントのような、ゆったりと、その他。のようなもの

$('.pane').hover(function() {
  // Mouseover code here
}, function() {
  // Mouseout code here
}