1

特定のクラス用の単純な jQuery ステートメントのセットがあります。

$(".printersToggle").mouseover(function() { 
    $(this).addClass("printersToggleOver");
}); 
$(".printersToggle").mouseout(function() { 
    $(this).removeClass("printersToggleOver");
});

と：

$(".printersToggle").click(function() {
    var id = $(this).attr('id');
    $.getJSON("/ajax", 
            function(data) {
                $.each(data, function(key, val) { 
                    $("#" + id).replaceWith('<div class="row printersToggle" id="' + id '"><div class="twelve columns">Show printers (Best price: £4.65)</div></div><!-- end of printers toggle --><!-- printers --><div class="row" id="printers"><table><thead><tr><th>Title</th><th>Rating (%)</th><th>Experience (jobs)</th><th>Average job speed (days)</th><th>Reliability (%)</th><th>Cost</th><th>Print</th></tr></thead><tbody><tr><td id="printersName_{{ design.id }}"></td><td id="printersRating"></td><td>4</td><td>2</td><td>96</td><td>£4.56</td><td class="success printButton radius">Add to Cart</td></tr></tbody></table></div>');  
                });
            });
     });
});

2 つ目 (クリック機能) がなければ、最初のものは意図したとおりに機能します。2 番目のステートメントでは、マウスオーバー効果が機能しなくなります。ここで何が起こっているのか分かりますか？

4

5 に答える 5

4

replaceWith() を呼び出すと、以前の DOM 要素とそれに関連付けられたイベント ハンドラーが削除されます。イベントハンドラーを動的にバインドするには、セレクターで on() を使用する必要があります。

$('#parentContainer').on('mouseover', '.printersToggle', function() { ... });
于 2012-10-19T13:17:05.107 に答える
1

試す：

$(document).ready(function () {
$(".printersToggle").hover(function() { 
        $(this).toggleClass("printersToggleOver");
    });
});
于 2012-10-19T13:20:12.147 に答える
1

代わりに次のコードを使用してください。

$("body").on("mouseover",".printersToggle" ,function(){$(this).addClass("printersToggleOver");
});


$("body").on("mouseout",".printersToggle" ,function(){$(this).removeClass("printersToggleOver");
});
于 2012-10-19T13:17:13.343 に答える
1

.hover()関数を使用できます。それが役立つかどうかを確認してください

$(".printersToggle").hover(function() { 
    $(this).addClass("printersToggleOver");
}, 
function() { 
    $(this).removeClass("printersToggleOver");
});
于 2012-10-19T13:17:23.563 に答える
1

/hoverの代わりに使ってみましたか?mouseovermouseout

$(".printersToggle").hover(function() { 
    $(this).addClass("printersToggleOver");
}, function() { 
    $(this).removeClass("printersToggleOver");
});
于 2012-10-19T13:17:28.500 に答える