Les gestionnaires d'événements jQuery ne tirent pas dans IE

Question

J'ai une liste d'éléments sur une page avec un ensemble de contrôles pour MoveUp, MoveDown et Delete.

Les contrôles sont placés en haut de la liste, masqués par défaut. Comme vous mouseover une ligne d'article, je sélectionne les commandes avec jquery

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

Cela fonctionne très bien dans Firefox .. les outils se déplacent dans la ligne actuelle, et les événements de clic appeler les fonctions ajax. Cependant, dans IE6 et IE7 .. aucun clic ne se produit. J'ai essayé de délier sur le mouseout et la reliaison sur chaque mouseover .. en vain.

J'ai également examiné diverses raisons en dehors de javascript (par exemple, les conflits png transparents, z-index, position: absolute) .. également aucune solution trouvée.

J'ai finalement eu besoin d'ajouter une rangée d'outils à chaque élément et afficher/masquer sur la souris sur/sur. Fonctionne aussi bien - le seul inconvénient est que j'ai plus de balises 'outils' sur ma page.

Est-ce que quelqu'un sait pourquoi IE ignore/supprime/tue les événements de souris une fois que les objets sont déplacés (en utilisant prepend)? Et pourquoi relancer l'événement après n'a également aucun effet? Je me suis fâché pendant presque 2 heures avant d'abandonner.

Answer 1

IE perd des événements en fonction de la façon dont vous ajoutez des éléments au DOM.

var ele = $("#itemtocopy"); 

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

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

Je recommande également d'utiliser .live() sur les événements de clic pour simplifier votre code un peu. Mouseover/out n'est pas encore supporté par live. http://docs.jquery.com/Events/live

Answer 2

J'ai eu un problème similaire. essayer d'utiliser .ready pour charger un div sur le chargement de la page initiale. fonctionne bien dans FF, mais pas ie7. J'ai trouvé un hack qui semble contourner ce problème.

J'ai charge appeler un rappel, divLoaded().

Dans divLoaded je vérifie le $ ('# targetdiv'). InnerText.length < 50 ou tout ce que vous pensez indiquera qu'il n'a pas chargé. Si je détecte ce cas, j'appelle simplement la fonction qui charge à nouveau ce div.

Assez curieusement, j'ajoute aussi un '.' à l'innerText avant de rappeler la fonction ajax. Il semble parfois que nous passons par 3 ou 4 boucles avant que la charge d'ajax ne prenne finalement. Cela m'amène à penser que document.ready fonctionne très bien dans IE7, ce qui semble dissiper un peu le mythe selon lequel il n'est pas fiable. Ce qui semble vraiment se produire est que .load est un peu flakey et ne fonctionne pas bien quand la page est juste chargée.

Je suis encore un peu verte avec tous les trucs jQuery, donc prends ça avec un grain de sel. Intéressé d'entendre quelqu'un prendre ma petite hypothèse.

acclamations

greg

Answer 3

Je viens de passer toute la journée de dépannage des événements ne déclenchaient pas sur des éléments annexés au DOM, (IE7, jQuery 1.4.1) et il n'a pas été parce que je devais utiliser en direct() (bien, bon à savoir, Tchad), et ce n'était pas parce que j'avais besoin de cloner les objets.

C'était parce que je choisissais les balises d'ancrage qui avaient un « # » en eux comme ceci:

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

Ma solution était d'utiliser l'attribut « Contient Selector » comme ceci:

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

Heureusement, j'ai assez de contrôle sur tout ce qui ne risque pas de se produire dans le futur. Ce n'est pas techniquement lié à des objets ajoutés, mais j'espère que cela permet à quelqu'un de gagner du temps.