Comment implémenter javascript discret avec la génération de contenu dynamique?

Question

J'écris beaucoup de contenu généré dynamiquement (développement sous PHP) et j'utilise jQuery pour ajouter de la flexibilité et de la fonctionnalité à mes projets.

Il est plutôt difficile d'ajouter JavaScript de manière discrète. Voici un exemple:

Vous devez générer un nombre aléatoire de div éléments ayant chacun une fonctionnalité différente onClick. Je peux utiliser l'attribut onclick sur mes éléments div pour appeler une fonction JS avec un paramètre mais ce n'est qu'une mauvaise solution. Aussi, je pourrais générer du code jQuery avec chaque div dans ma boucle PHP for, mais là encore, ce ne sera pas entièrement discret.

Alors, quelle est la solution dans des situations comme celle-ci?

Answer 1

Vous devez ajouter quelque chose aux divs qui définit quel type de comportement ils ont, puis utilisez jQuery pour sélectionner ces divs et ajouter le comportement. Une option consiste à utiliser l'attribut de classe, bien que cela puisse être utilisé pour la présentation plutôt que pour le comportement. Une alternative serait l'attribut rel, mais je trouve généralement que vous voulez aussi spécifier un CSS différent pour chaque comportement, donc class est probablement correct dans cette instance.

Ainsi, par exemple, laisse supposer que vous voulez bizarre et même comportement:

<div class="odd">...</div> 
<div class="even">...</div> 
<div class="odd">...</div> 
<div class="even">...</div> 

Puis, en jQuery:

$(document).load(function() { 
$('.odd').click(function(el) { 
// do stuff 
}); 
$('.even').click(function(el) { 
// dostuff 
}); 
}); 

jQuery dispose d'un moteur de sélection très puissant qui peut trouver basée sur un CSS basé sélecteur, et supporte également XPath et ses propres sélecteurs. Apprenez à les connaître! http://docs.jquery.com/Selectors

Answer 2

C'est un peu difficile à dire à partir de votre question, mais peut-être pouvez-vous utiliser différents sélecteurs jQuery pour configurer différents comportements de clic? Par exemple, supposons que vous avez les éléments suivants:

<div class="section-1"> 
    <div></div> 
</div> 
<div class="section-2"> 
    <div></div> 
</div> 

Peut-être que vous pourriez faire ce qui suit dans jQuery:

$('.section-1 div').onclick(...one set of functionality...); 
$('.section-2 div').onclick(...another set of functionality...); 

Fondamentalement, décider en fonction du contexte ce qui doit arriver. Vous pouvez également sélectionner tous les divs et tester un élément parent ou enfant afin de déterminer les fonctionnalités qu'ils obtiennent.

Je devrais en savoir plus sur les spécificités de votre situation pour donner des conseils plus ciblés, mais peut-être que cela vous aidera à démarrer.

Answer 3

je recommanderais sans tenir compte des normes du W3C et de l'écriture en HTML propriétés sur les éléments qui ont besoin de gestionnaires qui leur sont rattachés:

Note: cela ne briser le rendu de la page!

<ul> 
    <li handler="doAlertOne"></li> 
    <li handler="doAlertTwo"></li> 
    <li handler="doAlertThree"></li> 
</ul> 

Déclare quelques fonctions:

function doAlertOne() { } 
function doAlertTwo() { } 
function doAlertThree() { } 

Et puis en utilisant jQuery comme ceci:

$("ul li").each(function() 
{ 
    switch($(this).attr("handler")) 
    { 
     case "doAlertOne": 
      doAlertOne(); 
      break; 

     case ... etc. 
    } 
}); 

Soyez pragmatique.

Answer 4

Je ne connais pas vraiment JQuery, mais je sais que la boîte à outils DOJO rend le Javascript très discret possible.

Jetez un oeil à l'exemple ici:

La démo ajoute dynamiquement des événements à une table purement html en fonction des classes.

Un autre exemple est les caractéristiques de comportement, décrits ici: http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Answer 5

Je vous recommande d'utiliser cette chose appelée « Event delegation ». Voilà comment cela fonctionne. Donc, si vous voulez mettre à jour une zone, disons une div, et que vous voulez gérer les événements discrètement, vous attachez un gestionnaire d'événements à la div elle-même. Utilisez n'importe quel cadre que vous préférez faire. La pièce jointe d'événement peut se produire à tout moment, que vous ayez ou non mis à jour la div.

Le gestionnaire d'événements attaché à cette div recevra l'objet événement comme l'un de ses arguments. En utilisant cet objet événement, vous pouvez alors déterminer quel élément a déclenché l'événement. Vous pouvez mettre à jour le div plusieurs fois: les événements générés par les enfants de la div jailliront jusqu'à la div où vous pourrez les attraper et les manipuler.

Cela s'avère également être une énorme optimisation des performances si vous songez à attacher plusieurs gestionnaires à de nombreux éléments à l'intérieur de la div.