L'identification de contenu généré dynamiquement sur une page

Question

Quelle est la façon la plus pratique consistant à identifier l'élément généré dynamiquement à la page?

Laissez-moi vous expliquer. J'ai une liste d'éléments, il peut y avoir aussi peu ou autant d'éléments que l'utilisateur définit, sur une page. Chacun de ces correspond à un élément chacun avec son propre id. Maintenant, l'utilisateur a la possibilité de modifier ou supprimer ces éléments sur la page et ces opérations sont traitées avec jQuery. Chaque élément est livré avec un lien par opération qu'ils peuvent l'action (i.e. supprimer et modifier).

Maintenant un problème est de savoir qui élément que l'utilisateur a sélectionné. Pour faire face à ce que je donne chaque lien l'ID de l'élément comme un attribut ID, que je puis obtenir en utilisant jQuery:

 <a href="#" class="delete" id="<%= Model.elementID%>">Delete</a>

  $(".delete").live("click", function(event) {
      event.preventDefault();
      var elementID =  $(this).attr("id");
      //other code
   });

Ceci est évidemment loin d'être idéal car cela signifierait de nombreux éléments DOM pourraient avoir le même ID. Sinon je pourrais créer mon propre attribut tel que elementID mais je crois que ce casse les normes.

Alors, que pouvez-vous recommander. Comment puis-je identifier les éléments générés dynamiquement sur une page?

Answer 1

Je l'ai fait un peu pour mes sites et ma solution est une combinaison de l'endroit où vous avez commencé à partir et quelques-uns des commentaires:

Utilisez une convention de nommage, comme "ELEMENT_TYPE: id: action". Ainsi, votre exemple de produit soit « élément: 23: supprimer ». Ensuite, vous pouvez diviser () le .attr ( « id ») que vous avez attrapée et déterminer ce qu'il est ( « rapport » vs « dossier »), l'identifiant, et ce que vous voulez faire ( « supprimer », « modifier », "mouvement").

Cela a très bien fonctionné pour moi, et est très évolutive.

Je garde la classe, cependant, de sorte que vous pouvez facilement joindre les événements via jquery.

James

Answer 2

Pourquoi ne pas simplement ajouter une classe à la place. Cela résout également le problème d'avoir plusieurs id qui, comme vous éludé à n'est pas autorisé et causera des problèmes majeurs avec les opérations de jquery ultérieures.

<a href="#" class="delete" id="<%= Model.elementID%>">Delete</a>

  $(".delete").live("click", function(event) {
      event.preventDefault();
      //other code
      $(yourNewElement).addClass('noob');

   });

Answer 3

Une autre chose que vous pouvez faire est la suivante:

<a href="#<%= Model.elementID%>" class="delete"> Delete </a>
$(".delete").live("click", function(event) {
    event.preventDefault();
    var elementID =  $(this).attr("href");
    // strip the preceding '#'

    // rest of your code
});

PS: tout n'a pas une meilleure pratique. Certaines choses ont juste besoin d'une nouvelle appoach.

Cheers, HJR