我有一个< div>;它包含< span>.当您点击< div>时,它将删除该span,并将其替换为< div>包含< input>和< button> ;.这一切都很好,很好. 当点击时,< button>应该删除其父< div> (附加的)并将其替换为< 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的一部分！当我点击<按钮>时,页面上没有任何反应.我添加了一个console.log来确保事件正在运行.果然是,但有些奇怪.
我使用的是Chrome 27,其控制台具有整洁的功能.如果您使用console.log DOM元素,可以将鼠标悬停在日志中,并在页面中突出显示.我做了console.log($this [0]),它突出显示了这个元素,就像我所期待的那样.但是,当我做了console.log($this.children(‘div’)[0])),元素没有突出显示在页面中！为什么不？让我认为这个元素,由于某种原因,不在DOM中.它记录一个< div>到控制台,但它似乎不是实际的DOM中的一个.
因为这个$this.children(‘div’).replaceWith行不做任何事情！
这是怎么回事！为什么我可以替换< span>与< div>而不是相反呢？
解决方法
传播问题.更改：
$('#myPage').on('click',function () {
至
$('#myPage').on('click',function (e) {
e.stopPropagation();
jsFiddle example
点击取消泡沫,触发父母的点击事件.用火杀死它.