Question

我有<div>;它包含<span>。当您点击<div>时，它会移除范围，并将其替换为包含<div>和<input>的{{1}}。这一切都很好。

点击时<button>应该删除其父<button>（附加的一个）并再次用<div>替换它，但出了点问题。似乎父<span>不是DOM的一部分！

无论如何，这是一个简单的例子：

<div>

一些HTML，没什么太花哨的。虽然，由于DOM会不断变化，我使用<div id="myPage"> <div id="clickMe" class="selectedField editMe"> <span>Click Me</span> </div> </div>来委派事件。这是JavaScript：

.on

DEMO：http://jsfiddle.net/Z8abW/

这看起来很简单吧？点击该框会将$(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>'); }); });替换为<span>，然后点击（新添加的）<div>会将<button>放回原位。

但是，这不起作用。第一个事件有效。我可以点击添加<span>和<input>，但点击<button>不起作用。

我不知道如何解释它，但似乎我要删除的<button>不是DOM的一部分！当我点击<div>时，页面上没有任何反应。我添加了<button>以确保活动正在运行。果然，确实如此，但事情很奇怪。

我正在使用Chrome 27，它的控制台有一个简洁的功能。如果您使用console.log DOM元素，则可以将鼠标悬停在日志中，并在页面中突出显示它们。我做了console.log，它突出了元素，就像我期望的那样。但是，当我console.log($this[0])时，该元素在页面中突出显示而不是！为什么不？让我觉得元素由于某种原因不在DOM中。它会将console.log($this.children('div')[0]);记录到控制台，但它似乎不是实际DOM中的那个。

因此<div>行没有做任何事情！

发生了什么事！为什么我可以用$this.children('div').replaceWith替换<span>，而不是用其他方式替换？

Answer 1

传播问题。变化：

$('#myPage').on('click', '.selectedField .cancel', function () {

到

$('#myPage').on('click', '.selectedField .cancel', function (e) {
        e.stopPropagation();

<强> jsFiddle example

点击取消冒泡并触发父项上的点击事件。用火杀死它。

Answer 2

将$('#myPage').on('click', '.selectedField .cancel', function ()更新为

$('#myPage .selectedField ').on('click', '.cancel', function ()

选中此fiddle

附加的div不是DOM的一部分

2 个答案: