JavaScript personnalisé comme attribut node DOM pour effectuer quand il est prêt

Question

Puis-je ajouter un code JavaScript personnalisé comme un attribut de nœud DOM pour effectuer quand il est prêt comme JavaScript a ajouté que « onclick » attribut effectuée lorsque vous cliquez dessus ? Supposons que je doive traiter un élément div avec une fonction funcMyTransform.

Je pense que ce sera plus élégante d'écrire smth comme celui-ci

<div onReady=funcMyTransform(this)>...</div> 

Au lieu de

<div id="MyElement">...</div> 

<script type="text/javascript"> 
    $(document).ready(function(){$("#MyElement").funcMyTransform()}); 
</script> 

est-il tel "onReady" attribut ou quelque chose?

Answer 1

Avez-vous essayé le jQuery prêt?

$("#MyElement").ready(function(){$(this).funcMyTransform()}); 

Je suppose que cela ne fonctionnera pas mais vaut la peine d'être photographié?

Answer 2

Il n'y a pas d'événement onReady. Selon la fonctionnalité, vous pouvez résumer funcMyTransform à un plugin jQuery. Par exemple.

jQuery.fn.funcMyTransform = function() { 
    alert(this.id); 
}; 

jQuery(document).ready(function(){ 
    jQuery("#MyElement").funcMyTransform(); // Alerts => "MyElement" 
}); 

Si vous souhaitez accéder à l'élément dès que son « prêt », puis en plaçant votre script au bas du document (avant </body>) serait probablement une meilleure idée, et est nettement plus rapide (bien que légèrement) initier que pseudo "prêt" événement de jQuery.

Answer 3

Votre suggestion que le code de mélange avec le HTML comme ... plus élégant est discutable.

<div onReady=funcMyTransform(this)>...</div> 

En général, ceci est déconseillé car cela entraîne des problèmes de maintenance. Si je vous ai bien compris, lorsque l'événement onReady est activé, vous voulez appeler toutes ces fonctions. Une façon de le faire consiste à utiliser un REL ou tout autre élément que vous pourriez utiliser comme attribut expando.

Sur document prêt capturer tous les éléments et lire la valeur de l'attribut, puis eval(). (Les gens vous diront eval() est le mal, mais est tout à fait inoffensif ici).

$(document).ready(function(){ var v= $('.class_name').attr('rel'); eval(v); })

Il sera en fait eval() et activer tous vos javascript dans les attributs de votre Rel.

Answer 4

Comme d'autres l'ont dit, onWhatever attributs sont "comme si 1999" ;-). Le consensus général parmi la communauté Javascript moderne est que vous devriez éviter de les utiliser autant que possible (pour la maintenabilité et d'autres raisons).

Cela étant dit, il est un moyen d'obtenir quelque chose de très semblable à ce que vous voulez de façon beaucoup plus maintenable:

<div class="onReadyDoMyTransform">...</div> 

<script type="text/javascript"> 
    $(function(){$(".onReadyDoMyTransform").funcMyTransform()}); 

    // $(someFunction) == $(document).ready(someFunction); 
</script> 

Cette approche vous donnera tous les avantages d'être en mesure de décider " transforme onReady "dans votre couche HTML, mais sans tous les défauts d'un attribut" onReady ".La partie de script peut simplement aller à un JS commun que vous utilisez sur votre site, vous n'avez donc pas à vous soucier de l'ajouter avec chaque DIV.onReadyDoMyTransform.

Answer 5

J'ai utilisé er (élément-prêt) par Stuart Colville avant que ce soit quelque peu semblable à ce que vous parlez, sauf pour ce n'est pas un attribut d'élément.

http://muffinresearch.co.uk/archives/2006/04/12/element-ready/

Je l'ai utilisé cela dans un cas où je rentrais du HTML via une requête XHR et je voulais lui faire exécuter du javascript, mais le Royaume a dû être fini de charger avant que je puisse l'exécuter. Bien sûr, le document prêt ne fonctionnait pas, puisque le document principal était déjà chargé.