La meilleure façon de modifier un élément qui n'est pas encore créé

J'ai un champ <input> dans ma page Web, et je veux ajouter une méthode particulière là-dessus, disons fooBar().La meilleure façon de modifier un élément qui n'est pas encore créé

Voici ce que je fais:

<input id="xxx" .../> 
<script type="text/javascript"> 
    $("xxx").fooBar = function() { ... }; 
</script>

Cela fonctionne bien. Cependant, pour certaines raisons je ne détaillerai pas ici (en fait le HTML est généré par les composants JSF), le <script> sera déclaré avant le le tag <input>.

Ainsi, dans les mots des autres, je vais avoir dans mon HTML:

<script type="text/javascript"> 
    $("xxx").fooBar = function() { ... }; 
</script> 
<input id="xxx" .../>

Alors bien sûr, ce code ne fonctionnera pas correctement, car le script tentera d'obtenir ($("xxx")) et modifier un élément qui ne n'existe pas encore.

Si je veux coller sur l'ordre exact de ces deux étiquettes, quelle est la meilleure façon d'accomplir ce que je veux?

Modifier

Dans mon cas, $ fait référence au prototype, mais je me sers aussi jQuery dans ma demande. Et je dois être compatible avec IE6: o (

Source

2010-10-01 romaintaz

«$' est ce que dans votre exemple? Prototype? jQuery? – Tomalak

Oui, désolé, j'ai modifié ma question pour cela. J'utilise les deux, mais ici, '$' fait référence à Prototype. – romaintaz

Vous devez exécuter votre script après que le document est chargé avec jQuery vous souhaitez le faire avec.:

$(document).ready(function() { 
    //do stuff here 
});

Je ne peux pas dire quelle bibliothèque que vous utilisez, mais ils ont tous un équivalent du document de jQuery prêt.

Voici le prototype équi prêtiez:

document.observe("dom:loaded", function() { 
    // do stuff 
});

Source

2010-10-01 12:15:16 Skilldrick

En fait je voulais faire quelque chose de plus compliqué, parce que dans ma vraie page, j'ai beaucoup de '' et beaucoup de '

Essayez de mettre votre code load événement:

$(window).load(function(){ 
    $("#xxx").fooBar = function() { ... }; 
});

Source

2010-10-01 12:14:48 Sarfraz

Si le code doit être directement avant l'entrée, vous pouvez vérifier si elle est chargée après une certaine période de temps.

<script type="text/javascript"> 
    //Sets up a function to execute once the input is loaded 
    f = function() 
     { 
     //Checks if 'xxx' exists (may vary between frameworks) 
     if ($("xxx") !== undefined) 
      { 
      $("xxx").fooBar = function() { ... }; 
      //Escapes the timer function, preventing it from running again 
      return true; 
      } 
     //If still not loaded check again in half a second (0.5s or 500ms) 
     setTimeout(f,500); 
     return false; 
     } 
    f();//Initialize the timer function 
</script> 
<input id="xxx" .../>

Source

2010-10-01 12:24:30

Intelligent, mais que se passe-t-il si cela se produit? '' ... l'appel à fooBar dans le deuxième script pourrait s'exécuter alors que le chargeur différé prend une demi-seconde pause ... –

Je veux aller avec une approche setTimeout, mais je n'ai pas beaucoup aimé. Mais dans mon cas, le 'fooBar()' ne peut être exécuté que par l'événement 'onchange' du' '. Il n'y a donc presque aucune chance que la méthode 'fooBar()' soit déclenchée dans ces 500ms ... – romaintaz

vous pouvez réduire le temps de la minuterie à quelque chose de beaucoup plus réaliste comme 20ms, ou 0.02 secondes ... Mais oui, c'est définitivement une solution laide, je ne le recommanderais pas. –

Au lieu d'ajouter une méthode au noeud dom, pourquoi ne pas en faire une fonction séparée, donc au lieu de

$("xxx").fooBar = function() { 
    doStuff(this); 
};

vous auriez quelque chose comme

function xxx_fooBar() { 
    var me = document.getElementById('xxx'); 
    doStuff(me); 
};

Une autre suggestion: Si vous pouvez ajouter des attributs à l'élément <input>, vous pouvez faire quelque chose comme ça ...

<script> 
function xxx_init (e) { 
    e.fooBar = function() { 
    doStuff(this); 
    }; 
} 
</script> 
<input onload="xxx_init(this)" id="xxx" .../>

Ou vous pourriez faire comme d'autres suggèrent et joindre les scripts à l'événement window.onload.

Source

2010-10-01 12:25:02

Je ne comprends pas comment cette approche pourrait résoudre mon problème. Dans ce cas, j'aurais besoin d'appeler toutes mes méthodes 'xxx_fooBar()' quand le document sera prêt ... – romaintaz

fooBar est-il vraiment un écouteur d'événement, comme 'onchange'? Dans ce cas, cela ne vous aidera pas du tout. Je supposais que 'fooBar' était juste une propriété de fonction générique, pas un écouteur d'événement. Dans ce cas, vous pouvez juste appeler 'xxx_fooBar()' au lieu de '$ (" xxx "). FooBar()'. Si 'fooBar' est vraiment' onchange' ou 'onclick' ou quelque chose, non, cela ne fonctionnera pas. –

@no 'fooBar()' est juste une fonction, appelée par l'événement 'onchange' en effet, mais aussi par une autre méthode Javascript. Mais quand il est appelé par 'onchange', il doit appeler' myElement.fooBar(); 'et non myElement_fooBar();'. Mais d'accord, maintenant je comprends ton idée. – romaintaz

Questions connexes

La meilleure façon de modifier un élément qui n'est pas encore créé

Répondre

Questions connexes