événement onclick ne fonctionne pas lorsque .append()

Exemple simple: Je htmlévénement onclick ne fonctionne pas lorsque .append()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <title>Test</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link rel="stylesheet" type="text/css" href="portal.css" /> 
     <script type="text/javascript" src="/test/lib.js"></script> 
     <script type="text/javascript" src="test.js"></script> 
    </head> 
    <body onload="init();" class="body"> 
     <div id="wrapper"> 
     </div> 
    </body> 
</html>

j'appelle

$("#wrapper").append(
     "<div onclick=\"alert('TEST')\" style=\"background-color: aqua; width: 20px; height: 20px; position: absolute\">" + 
     "</div>" 
    );

apparaît donc petite boîte, quand je clique dans FF ou Chrome - La boîte d'alerte apparaît. Mais le problème est: dans IE8 onclick ne fonctionne pas. Cela fonctionne quand j'utilise .html("...").

S'il vous plaît, aidez-moi! =) Merci!

Source

2010-02-28 user283010

Ceci est probablement une fonctionnalité de sécurité, peut-être liée au fait que IE ne peut pas renvoyer directement une fonction via eval. Pour contourner le problème, vous pouvez créer une arborescence DOM à l'aide de jQuery, puis écrire $("#wrapper").empty.append(tree) pour contourner ce problème.

Source

2010-02-28 18:17:43 SLaks

Vous pouvez utiliser jQuery pour créer le nouveau div. Cela permettrait à jQuery de gérer la logique de clic entre les navigateurs. Je viens de tester ce qui suit dans IE8, et il fonctionne:

$("<div>") 
    .css({'background-color':'aqua','width':'20px','height':'20px','position':'absolute'}) 
    .click(function(){ alert("TEST"); }) 
    .appendTo("#wrapper");

Démo en ligne: http://jsbin.com/ekumi/edit

Source

2010-02-28 18:22:24 Sampson

IE a un problème d'évaluer dynamiquement inséré html et leurs événements. Je pense que c'est parce que online onclick/onmouseover/etc. doit être analysé par le moteur HTML lors du chargement de la page et ils ne sont pas complètement analysés lors de l'insertion d'éléments via JS. Parfois cela fonctionne, et d'autres fois non. Il est préférable d'insérer l'élément, puis câbler un événement après que:

$("#wrapper").html("<div id=\"newdiv\" style=\"background-color: aqua; width: 20px; height: 20px; position: absolute\"></div>"); 
$("#newdiv").click("function() { alert("TEXT"); });

Source

2010-02-28 18:26:44

Tout d'abord, je suis désolé - doit contenir .append (...) dans le code question - et cela ne fonctionne pas dans IE. J'ai déjà édité la question.

Je résoudre le problème de cette façon:

$('<div>').append($('#item-of-interest').clone()).remove().html();

Mais je ne comprends toujours pas pourquoi IE se comporte incorrecte avec la méthode append. = (

Source

2010-02-28 20:29:05 user283010

Il semble que IE8 ne peut pas traiter les événements déclarés dans les balises html qui sont vides, même si elles sont données des mesures non nulles par css.

Essayez d'ajouter «   » en tant que contenu. Il a travaillé pour moi.

Source

2010-12-21 15:43:49 albertomv

événement onclick ne fonctionne pas lorsque .append()

Répondre

Questions connexes