我有一个<div>；它包含一个<span>. 当您单击 时<div>，它会删除跨度，并将其替换为<div>包含 an<input>和 的<button>。这一切都很好。
,<button>单击时应该删除其父级<div>（附加的）并再次将其替换为 a <span>，但出现了问题。似乎父<div>级不是 DOM 的一部分！
无论如何，这是一个简单的例子：
<div id="myPage">
<div id="clickMe" class="selectedField editMe">
<span>Click Me</span>
</div>
</div>
一些 HTML，没什么太花哨的。不过，由于 DOM 会不断变化，我过去常常.on委托事件。这是JavaScript：
$(function(){
$('#myPage').on('click', '.selectedField', function () {
if($(this).hasClass('editMe')){
var $this = $(this).toggleClass('editMe editing'),
$input = $('<input/>', {
placeholder: 'type something...'
}),
$cancel = $('<button></button>', {
class: 'cancel',
type: 'button',
html: 'x'
})
$this.children('span').replaceWith($('<div></div>').append($input, $cancel));
}
});
$('#myPage').on('click', '.selectedField .cancel', function () {
var $this = $(this).closest('.selectedField').toggleClass('editMe editing');
console.log($this.children('div')[0]);
$this.children('div').replaceWith('<span>Click Me</span>');
});
});
演示：http: //jsfiddle.net/Z8abW/
这看起来很简单，对吧？单击该框将 替换为<span>，<div>然后单击（新添加的）<button>将其<span>放回原处。
但是，这行不通。第一个事件有效。我可以单击添加<input>和<button>，但单击<button>不起作用。
我不知道如何解释它，但似乎<div>我要删除的不是 DOM 的一部分！当我单击<button>时，页面上没有任何反应。我添加了一个console.log以确保事件正在运行。果然是这样，但有些奇怪。
我使用的是 Chrome 27，它的控制台有一个简洁的功能。如果你是console.logDOM 元素，你可以在日志中将鼠标悬停在它们上面，它会在页面中突出显示它们。我做到了console.log($this[0])，它突出了元素，就像我期望的那样。但是，当我这样做时，页面中没有console.log($this.children('div')[0]);突出显示该元素！为什么不？让我觉得元素，出于某种原因，不在 DOM 中。它确实将 a 记录到控制台，但它似乎不是实际 DOM 中的那个。<div>
正因为如此，这$this.children('div').replaceWith条线什么也没做！
这是怎么回事！为什么我可以<span>用 a代替<div>，而不是相反？