jquery - jQuery 两个语句显然冲突，但我不知道为什么

Question

我有一组针对特定类的简单 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>');  
                });
            });
     });
}); 

如果没有第二个（点击功能），第一个按预期工作。使用第二个语句，鼠标悬停效果停止工作。知道这里发生了什么吗？

Answer 1

当您调用 replaceWith() 时，您将删除前一个 DOM 元素以及与之关联的任何事件处理程序。您应该使用带有选择器的 on() 来动态绑定事件处理程序：

$('#parentContainer').on('mouseover', '.printersToggle', function() { ... });

Answer 2

请改用此代码：

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


$("body").on("mouseout",".printersToggle" ,function(){$(this).removeClass("printersToggleOver");
});

Answer 3

您可以使用.hover()函数，看看是否有帮助

$(".printersToggle").hover(function() { 
    $(this).addClass("printersToggleOver");
}, 
function() { 
    $(this).removeClass("printersToggleOver");
});

Answer 4

您是否尝试过使用hover而不是mouseover/ mouseout？

$(".printersToggle").hover(function() { 
    $(this).addClass("printersToggleOver");
}, function() { 
    $(this).removeClass("printersToggleOver");
});

Answer 5

尝试：

$(document).ready(function () {
$(".printersToggle").hover(function() { 
        $(this).toggleClass("printersToggleOver");
    });
});