Identificazione contenuti generati dinamicamente in una pagina

Question

Qual è il modo migliore-pratica di identificazione elemento generato dinamicamente a pagina?

Mi spiego. Ho una lista di elementi, non ci può essere come pochi o molti elementi come l'utente definisce, in una pagina. Ognuna di queste corrisponde a un elemento ciascuna con il proprio ID. Ora, l'utente ha la possibilità di modificare o eliminare questi elementi della pagina e queste operazioni sono gestite con jQuery. Ogni elemento è dotato di un collegamento per ogni operazione che possono azione (cioè cancellare e modificare).

Ora un problema è sapere che elemento che l'utente ha selezionato. Per far fronte a questo io do ogni collegamento l'ID dell'elemento come attributo ID, che ho quindi ottenere utilizzando jQuery:

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

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

Questa è ovviamente ben lungi dall'essere ideale, poiché ciò significherebbe molti elementi DOM potrebbero avere lo stesso ID. In alternativa avrei potuto creare il mio attributo come elementID, ma credo che questo rompe gli standard.

Allora, cosa si potrebbe raccomandare. Come posso identificare elementi generati in modo dinamico in una pagina?

Answer 1

L'ho fatto un bel po 'per i miei siti e la mia soluzione è una combinazione di dove si è partiti da e alcuni dei commenti:

Utilizzare una convenzione di denominazione, come "ELEMENT_TYPE: id: azione". Così, il vostro esempio generato sia "elemento: 23: cancellare". Poi si può dividere () il .attr ( "id") che hai afferrato e determinare quello che è ( "rapporto" vs "cartella"), l'id, e che cosa si vuole fare ( "cancella", "Modifica ", "movimento").

Questo ha funzionato molto bene per me, ed è molto scalabile.

avrei tenuto la classe, però, in modo che si può facilmente collegare gli eventi tramite jQuery.

James

Answer 2

Perché non basta aggiungere una classe, invece. Questo risolve anche il problema di avere id multiple di che, come si sfuggiva a non è consentito e causerà grandi problemi con le successive operazioni di jQuery.

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

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

   });

Answer 3

Un altra cosa che potreste fare è questo:

<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: tutto ciò non ha una best practice. Alcune cose solo bisogno di un nuovo appoach.

Saluti, JRH