无论如何,这里有一个简单的例子：

<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>而不是相反呢？