Identificar conteúdo gerado dinamicamente em uma página

Question

O que é a maneira mais prática de identificar elemento gerado dinamicamente na página?

Deixe-me explicar. Eu tenho uma lista de elementos, não pode ser tão poucos ou tantos elementos como os define usuário, em uma página. Cada um deles corresponde a um item cada um com seu próprio id. Agora, o usuário tem a capacidade de editar ou apagar esses elementos na página e estas operações são manuseados com jQuery. Cada elemento vem com um link por operação puderem ação (isto é, excluir e editar).

Agora, um problema é saber que elemento que o usuário tenha selecionado. Para lidar com esse eu dou cada link do ID do elemento como um atributo ID, que, em seguida, obter 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
   });

Esta é, obviamente, longe de ser ideal, pois significaria muitos elementos DOM poderia ter o mesmo ID. Como alternativa eu ??poderia criar meu próprio atributo como elementID mas acredito que esta normas breaks.

Então, o que você poderia recomendar. Como posso identificar elementos gerados dinamicamente em uma página?

Answer 1

Eu fiz isso um pouco para meus sites e minha solução é uma combinação de onde você começou e alguns dos comentários:

Use uma convenção de nomenclatura, como "ELEMENT_TYPE: id: ação". Portanto, o seu exemplo é gerada ser "elemento: 23: delete". Em seguida, você pode dividir () o .attr ( "id") que você pegou e determinar o que é ( "relatório" vs "pasta"), o id, eo que você quer fazer ( "editar "delete" ", "movimento").

Isso tem funcionado muito bem para mim, e é muito escalável.

Eu manteria a classe, embora, de modo que você pode facilmente anexar eventos via jquery.

James

Answer 2

Por que não apenas adicionar uma classe em vez disso. Isso também resolve o problema de ter múltiplas do id que, como você escapado para não é permitida e vai causar grandes problemas com operações jQuery subsequentes.

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

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

   });

Answer 3

Uma outra coisa que você poderia fazer é esta:

<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: tudo não tem uma boa prática. Algumas coisas simplesmente precisa de um novo appoach.

Cheers, JRH