JQuery:动态创建的html不响应JQuery函数

JQuery: Dynamically-created html not responding to JQuery functions

本文关键字：JQuery 不响应函数 html 创建动态更新时间：2023-09-26

我使用下面的代码动态地生成一个div:

// my html string :)
var myString = '&lt;id="newDiv"div&gt; hello &lt;/div&gt;';
// html decode the string    
myString = $("<div />").html(myString).text();
// appending the string
$("#parentDiv").append(myString);

它可以很好地附加(它显示在屏幕上)。还有$('#newDiv')。Length正确显示的值是1。但是当我尝试对它(或任何函数)调用remove()时，比如

$('#newDiv').remove()

什么也不会发生。发生了什么事?

这里有一些额外的工作。而<id="newDiv"div> hello </div>实际上是<id="newDiv"div> hello </div>，这在我的理解中不是正常的html。

//here is what I think you wanted:
    $('<div id="newDiv">hello</div>').appendTo("#parentDiv");
    alert($("#newDiv").length);
    $("#newDiv").remove();

edit -解码HTML文本，然后附加:

var emptyDivNeverAppendedToDom = $('<div/>');
//per the other so.com question
    var html = emptyDivNeverAppendedToDom.html('&lt;div id="newDiv"&gt; world &lt;/div&gt;').text();
//just being verbose.
    var elem = $(html);
    //the actual work
    elem.appendTo("#parentDiv");
    //elem.remove();

只要你把id放在正确的位置就可以很好地工作:

var myString = '&lt;div id="newDiv"&gt; hello &lt;/div&gt;';

http://jsfiddle.net/NN9v2/1/