私は持ってい<div>ます; が含まれてい<span>ます。をクリックすると、スパンが削除され、とを含む<div>に置き換えられます。これはすべて順調です。<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 の一部ではないようです! をクリックして<button>も、ページで何も起こりません。console.logイベントが実行されていることを確認するために を追加しました。確かにそうでしたが、何かがおかしいです。
Chrome 27 を使用していますが、そのコンソールには優れた機能があります。要素を DOMする場合console.log、ログでそれらの上にカーソルを置くと、ページで強調表示されます。console.log($this[0])すると、期待どおりに要素が強調表示されました。しかし、私がやったときconsole.log($this.children('div')[0]);、要素はページで強調表示されませんでした! なぜだめですか？なんらかの理由で、要素がDOMにないと思います。コンソールにログ<div>を記録しますが、実際の DOM のものではないようです。
このため、$this.children('div').replaceWithラインは何もしません!
どうしたの！を に置き換えることができるのに、その逆はできないのはなぜ<span>ですか<div>?