jQuery脚本在页面进行实时编辑之前不会运行

Question

我目前有以下简单的jQuery函数，只需在鼠标悬停时淡入淡出4个div：

$('#jig1').mouseover(function(){    
    $('#jig2, #jig3, #jig4').fadeTo(2000, 0.15, function(){});
    $('#jig1').fadeTo(2000, 1, function() {});
});

$('#jig2').mouseover(function(){    
    $('#jig1, #jig3, #jig4').fadeTo(2000, 0.15, function(){});
    $('#jig2').fadeTo(2000, 1, function() {});
});

$('#jig3').mouseover(function(){    
    $('#jig1, #jig2, #jig4').fadeTo(2000, 0.15, function(){});
    $('#jig3').fadeTo(2000, 1, function() {});
});

$('#jig4').mouseover(function(){    
    $('#jig1, #jig2, #jig3').fadeTo(2000, 0.15, function(){});
    $('#jig4').fadeTo(2000, 1, function() {});
});

这个脚本确实可以完成我的预期，但是在某个地方存在一个大问题，因为脚本只在我加载页面后才能工作，并且用dev编辑脚本。 Firebug等工具。通过实时编辑，我的意思是添加任何字符，然后将其删除，否则在编辑之前将其渲染为相同，但不知何故，它会运行。

知道为什么会这样做吗？我完全被难过了。