9

私は持ってい<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>?

4

2 に答える 2

9

伝播の問題。変化する：

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

に

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

jsFiddle の例

キャンセルをクリックするとバブルが発生し、親でクリックイベントがトリガーされます。火で殺します。

于 2013-05-24T14:46:02.843 に答える
6

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

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

このフィドルをチェックしてください

于 2013-05-24T14:42:50.573 に答える