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

Question

这是场景...我在每个字段旁边都有一个复选框，我在页面加载时用带有“删除”文本的 jquery 替换该复选框，使我能够通过 jquery 删除该字段，这工作正常。就像这样...

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

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

是否可以在不刷新页面的情况下替换添加到页面的新元素的内容？如果没有，我总是可以有两个具有不同标记的模板，具体取决于一个用于 js，一个用于非 js，但我试图避免这种情况。

提前致谢。

Answer 1

您可以使用 .livequery() 插件，如下所示

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

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

Answer 2

看看这个很酷的演示。它删除和添加元素，如魅力。

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

操作方法如下：

首先最重要的是，(x)html 非常简单。
xHTML Snippet

<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