Identification du contenu généré de manière dynamique sur une page

Question

Quelle est la meilleure façon d'identifier un élément généré dynamiquement sur une 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 ceux-ci correspond à un article avec chacun son identifiant. Maintenant, l'utilisateur a la possibilité d'éditer ou de supprimer ces éléments sur la page et ces opérations sont gérées avec jQuery. Chaque élément est livré avec un lien par opération qu'ils peuvent actionner (c'est-à-dire supprimer et éditer).

Maintenant, un problème est de savoir quel élément 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 beaucoup d'éléments DOM pourrait avoir le même ID . Sinon, je pourrais créer mon propre attribut tel que elementID mais je crois que cela brise les standards.

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

Answer 1

Je l'ai fait tout à 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 ". Donc votre exemple généré est "element: 23: delete". Ensuite, vous pouvez diviser() le .attr ("id") que vous avez saisi et déterminer ce qu'il est ("report" vs "dossier"), l'ID, et ce que vous voulez faire ("supprimer", "modifier" ", "bouge toi").

Cela a très bien fonctionné pour moi, et est très évolutif. Je garderais la classe, cependant, de sorte que vous pouvez facilement attacher des é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 l'avez évité, n'est pas autorisé et causera des problèmes majeurs avec les opérations jquery suivantes.

<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 ne dispose pas d'une meilleure pratique. Certaines choses ont juste besoin d'un nouvel appoach.

Cheers, HJR