jQuery 事件处理程序未在 IE 中触发

Question

我在页面上有一个项目列表，其中包含一组上移、下移和删除控件。

这些控件位于默认情况下隐藏的列表顶部。 当您将鼠标悬停在项目行上时，我会使用 jquery 选择控件，

//doc ready function:
..
var tools = $('#tools');
$('#moveup').click(MoveUp);
$('#movedn').click(MoveDn);
$('#delete').click(Delete);
..
$('li.item').mouseover(function(){
    $(this).prepend(tools);
});

这在 Firefox 中效果很好。工具移动到当前行，单击事件调用 ajax 函数。 然而，在IE6和IE7中..没有点击发生。 我尝试在鼠标移出时解除绑定并在每次鼠标悬停时重新绑定..但无济于事。

我还研究了 javascript 之外的各种原因（例如透明 png 冲突、z-index、位置：绝对）..也没有找到解决方案。

我最终需要向每个项目添加一个工具行，并在鼠标悬停/移出时显示/隐藏。 效果也很好——唯一令人沮丧的是我的页面上有更多的“工具”标记。

有谁知道为什么一旦对象移动（使用前置）IE 就会忽略/删除/终止鼠标事件？ 为什么事后重新绑定事件也没有效果？ 让我恼火了将近2个小时才放弃。

Answer 1

IE 将丢失事件，具体取决于您向 DOM 添加内容的方式。

var ele = $("#itemtocopy");

$("#someotheritem").append( ele ); // Will not work and will lose events

$("#someotheritem").append( ele.clone(true) );

我还建议在点击事件上使用 .live() 来稍微简化您的代码。 live 尚不支持鼠标悬停/移出。 http://docs.jquery.com/Events/live

Answer 2

我只是花了一整天的时间对未触发附加到 DOM 的项目（IE7、jQuery 1.4.1）的事件进行故障排除，这并不是因为我需要使用 live()（不过，很高兴知道，Chad），也不是因为因为我需要克隆这些项目。

这是因为我选择的锚标记中包含“#”，如下所示：

var myitem = $('a[href=#top]');

我的解决方案是使用“属性包含选择器”，如下所示：

var myitem = $('a[href*=top]');

幸运的是，我对所有内容都有足够的控制权，将来不太可能破坏。 这在技术上与附加对象无关，但希望它可以节省一些时间。

Answer 3

我有类似的问题。 尝试使用 .ready 在初始页面加载时加载 div。
在 FF 中运行良好，但在 ie7 中运行不佳。

我发现了一个似乎可以解决这个问题的技巧。

我有加载调用回调，divLoaded()。

在 divLoaded 中，我检查 $('#targetdiv').innerText.length < 50 或任何你认为表明它没有加载的值。 如果我检测到这种情况，我只需调用再次加载该 div 的函数即可。

奇怪的是，我还添加了一个“.” 在我回想起 ajax 函数之前，先到innerText。 有时我们似乎会经历 3 或 4 个循环才能最终完成 ajax 加载。

这让我认为 document.ready 在 IE7 中工作得非常完美，这似乎消除了一些关于它不可靠的神话。 真正“似乎”发生的是 .load 有点不稳定，并且在页面刚刚加载时无法正常工作。

我对 jQuery 的东西还是有点陌生​​，所以对此持保留态度。 有兴趣听听任何人对我的小假设的看法。

干杯

格雷格