Question

这是场景...我在页面加载时替换每个字段旁边的复选框，带有“删除”文本的jquery，这使我能够通过jquery删除字段，这很好。像这样......

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

然而问题在于，在页面加载之后，我还为用户提供了动态添加新字段的选项。新添加的字段虽然有复选框而不是删除链接，因为它们没有被jquery替换，因为它们是在初始页面加载后添加的。

如果不进行页面刷新，是否可以替换添加到页面中的新元素的内容？如果没有，我可以总是有两个不同标记的模板，一个用于js，一个用于非js，但我试图避免taht。

提前致谢。

Answer 1

您可以使用.livequery() plugin，如下所示：

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

匿名函数针对找到的每个元素运行，每个 new 元素与选择器匹配时添加。

Answer 2

看看这个kool演示。它删除并添加了魅力等元素。

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

以下是：

首先，（x）html非常简单。 xHTML代码段

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

隐藏的输入元素只是让您有机会动态调用您可以开始使用的数字。例如，可以使用PHP或ASP设置。 onclick事件处理程序用于调用该函数。最后，div元素被设置并准备好接收一些附加到自身的孩子（这听起来很奇怪）。

Mkay，到目前为止这么容易。现在JS功能。

addElement JavaScript功能

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);
}

如果你愿意，

removeElement JavaScript功能

function removeElement（divNum）{ var d = document.getElementById（'myDiv'）; var olddiv = document.getElementById（divNum）; d.removeChild（olddiv）; }

那就是那个。偷走你的叔叔。

这取自本文/教程：http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/

我自己刚学会了这个。谢谢你提出的问题

希望有所帮助。

<强> PK

如何使用Jquery替换添加到页面的新元素

2 个答案: