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

I have a list of items on a page with a set of controls to MoveUp, MoveDown and Delete.

我有一个页面上的项目列表,其中包含一组MoveUp,MoveDown和Delete控件。

The controls sit at the top of list hidden by default. As you mouseover an item row, I select the controls with jquery

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

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

This works great in Firefox .. the tools move into the current row, and the click events call the ajax functions. However, in IE6 and IE7 .. no click occurs. I tried unbinding on mouseout and rebinding on each mouseover .. to no avail.

这在Firefox中运行良好..工具移动到当前行,click事件调用ajax函数。但是,在IE6和IE7中没有发生任何点击。我尝试在mouseout上解除绑定并重新绑定每个鼠标悬停..无济于事。

I also looked into various reasons outside of javascript (e.g. transparent png conflicts, z-index, position:absolute) .. also no solution found.

我还研究了javascript以外的各种原因(例如透明的png冲突,z-index,position:absolute)..也没有找到解决方案。

I eventually needed to add a tools row to each item and show/hide on mouse over/out. Works just as well -- the only downer is that I have much more 'tools' markup on my page.

我最终需要为每个项添加一个工具行,并在鼠标上/下显示/隐藏。同样适用 - 唯一的挫折是我的页面上有更多'工具'标记。

Does anyone know why IE ignores/drops/kills the mouse events once the objects are moved (using prepend)? And why rebinding the event afterwards also has no effect? Kept me annoyed for almost 2 hours before I gave up.

有没有人知道为什么IE移动对象后忽略/丢弃/杀死鼠标事件(使用前置)?为什么事后重新绑定事件也没有效果?在我放弃之前,让我生气了将近2个小时。

3 个解决方案

#1

IE will lose events depending on how you are adding things to the DOM.

IE将丢失事件,具体取决于您如何向DOM添加内容。

var ele = $("#itemtocopy");

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

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

I would also recommend using .live() on the click events to simplify your code a little. Mouseover/out is not supported by live yet. http://docs.jquery.com/Events/live

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

#2

I just spent the whole day troubleshooting events not triggering on items appended to the DOM, (IE7, jQuery 1.4.1) and it wasn't because I needed to use live() (though, good to know, Chad), nor was it because I needed to clone the items.

我只花了一整天的时间来解决事件没有触发附加到DOM的项目(IE7,jQuery 1.4.1),这不是因为我需要使用live()(虽然,很高兴知道,Chad),也不是因为我需要克隆这些物品。

It was because I was selecting anchor tags that had a "#" in them like so:

这是因为我选择了锚点标签,其中包含“#”,如下所示:

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

My solution was to use the "Attribute Contains Selector" like so:

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

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

Fortunately I have enough control over everything that it won't likely break in the future. This isn't technically related to appended objects, but hopefully it saves someone some time.

幸运的是,我对将来不会破坏的一切都有足够的控制权。这在技术上与附加对象无关,但希望能节省一些时间。

#3

i had a similar problem. trying to use .ready to load a div on the initial page load. works well in FF , but not ie7.

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

i have found a hack that seems to get around this.

我发现了一个似乎可以解决这个问题的黑客攻击。

I have load call a callback, divLoaded().

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

In divLoaded i check the $('#targetdiv').innerText.length < 50 or whatever you think will indicate that it didnt load. If I detect that case, i simply call the function taht loads that div again.

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

Oddly enough, i also add a '.' to the innerText before i recall the ajax function. It seems taht sometimes we go through 3 or 4 loops before the ajax load finally takes.

奇怪的是,我还加了一个'。'在我回忆起ajax函数之前到innerText。似乎有时我们会在ajax加载最终需要之前经历3或4个循环。

This leads me to think that document.ready works pretty flawlessly in IE7, which seems to dispel a bit of a myth that it is unreliable. What really 'seems' to be happening is that .load is a little bit flakey and doesnt work well when the page is just loaded.

这让我认为document.ready在IE7中完美运行,这似乎消除了一些不可靠的神话。真正“看起来”正在发生的是.load是一个有点不稳定的东西,当页面刚加载时它不能正常工作。

I am still a bit green w/ all the jQuery stuff, so take this w/ a grain of salt. Interested to hear anyone's take on my little hypothesis.

我仍然有点绿色w /所有jQuery的东西,所以拿这个w /一粒盐。有兴趣听到任何人接受我的小假设。

cheers

greg

#1