La identificación de contenido generado dinámicamente en una página

Question

¿Cuál es la mejor manera de identificar prácticas elemento generado de forma dinámica en la página?

Me explico. Tengo una lista de elementos, no puede ser tan pocos o tantos elementos como el usuario define, en una página. Cada uno de ellos corresponde a un elemento cada una con su propio ID. Ahora, el usuario tiene la posibilidad de editar o eliminar estos elementos de la página y estas operaciones se manejan con jQuery. Cada elemento viene con un enlace por operación que puedan acción (es decir, eliminar y editar).

Ahora, un problema es saber que elemento que el usuario ha seleccionado. Para hacer frente a este Doy cada enlazar el ID del elemento como un atributo ID, que luego puedo obtener usando jQuery:

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

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

Esto es obviamente muy lejos de ser la ideal ya que significaría muchos elementos DOM podrían tener el mismo ID. Alternativamente pude crear mi propio atributo como elementID pero creo que esto rompe las normas.

Entonces, ¿qué podría recomendar. ¿Cómo puedo identificar elementos generados dinámicamente en una página?

Answer 1

He hecho esto un poco para mis sitios y mi solución es una combinación de donde se encontraba cuando empezó y algunos de los comentarios:

Utilice una convención de nombres, como "ELEMENT_TYPE: id: la acción". Así que de su ejemplo generada sea "elemento: 23: borrar". A continuación, puede dividir () la .attr ( "id") que consiguió y determinar lo que es ( "informe" vs "carpeta"), el identificador, y lo que quiere hacer ( "borrar", "editar ", "movimiento").

Esto ha funcionado muy bien para mí, y es muy escalable.

Me gustaría mantener la clase, aunque, por lo que se puede conectar fácilmente a través de eventos de jQuery.

James

Answer 2

¿Por qué no agregar una clase en su lugar. Esto también resuelve el problema de tener múltiples identificadores que como se eludió no está permitido y causará grandes problemas con las operaciones posteriores jquery.

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

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

   });

Answer 3

Otra cosa que podría hacer es la siguiente:

<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: todo lo que no tiene una buena práctica. Algunas cosas simplemente necesitan un nuevo appoach.

Saludos, JRH