Como substituir novos elementos adicionados a uma página com jQuery

Question

Aqui está o cenário ... Eu tenho uma caixa de seleção AA ao lado de cada campo que estou substituindo na página Carregar pelo jQuery por um texto "excluir" que me permite excluir o campo via jQuery, o que está funcionando bem. Igual a...

$(".profile-status-box").each(function(){ $(this).replaceWith('<span class="delete">' + 'Delete' + '</span>') });

O problema entra, no entanto, é que, após o carregamento da página, também estou dando ao usuário a opção de adicionar dinamicamente novos campos. Os novos campos adicionados têm a caixa de seleção e não o link de exclusão porque não estão sendo substituídos pelo jQuery, pois estão sendo adicionados após a carga inicial da página.

Não é possível substituir o conteúdo de novos elementos adicionados à página sem fazer uma atualização de página? Caso contrário, sempre posso ter dois modelos com marcação diferente, dependendo de um para JS e um para não JS, mas estava tentando avitar Taht.

Desde já, obrigado.

Answer 1

Você pode usar o .livequery() plugar, assim:

$(".profile-status-box").livequery(function(){ 
  $(this).replaceWith('<span class="delete">Delete</span>') 
});

A função anônima é executada contra cada elemento encontrado e cada novo elemento correspondendo ao seletor conforme adicionado.

Answer 2

Dê uma olhada nesta demonstração Kool. Ele remove e adiciona elementos como um charme.

http://www.dustindiaz.com/basement/addremovechild.html

Aqui está como:

Primeiro de tudo, o (x) html é realmente simples.snippet xhtml

<input type="hidden" value="0" id="theValue" />
<p><a href="javascript:;" onclick="addElement();">Add Some Elements</a></p>
<div id="myDiv"> </div>

O elemento de entrada oculto simplesmente oferece a chance de chamar dinamicamente um número com o qual você pode começar. Isso, por exemplo, pode ser definido com PHP ou ASP. O manipulador de eventos OnClick é usado para chamar a função. Por fim, o elemento div está definido e pronto para receber algumas crianças anexadas a si mesma (Deus que soa estranho).

Mkay, até agora tão fácil. Agora as funções do JS.

Função de JavaScript de AddElement

function addElement() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById('theValue').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'my'+num+'Div';
  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';
  ni.appendChild(newdiv);
}

E se você quiser,

Remova a função JavaScript

função removelement (divnum) {var d = document.getElementById ('mydiv'); var OldDiv = document.getElementById (divnum); D.RemoveChild (OldDiv); }

E é isso. Bobs seu tio.

Isso é retirado deste artigo/tutorial: http://www.dustindiaz.com/add-and-remove-html-lements-dynamicousics-with-javascript/

Acabei de aprender isso sozinho. Obrigado pela pergunta

Espero que ajude.

Pk