0

jQueryポップアップダイアログがあり、上部に閉じるリンクがあります。何らかの理由で、コードがここで呼び出されることはありません。デバッガーで確認しました。

オープンコードは問題なく動作するので、単純なものだと思います。

JavaScriptコードは次のとおりです。

$(document).ready(function(){
  $('#dialogOpen').click(function() {
    console.log("link clicked");
    openDialog('#dialog');
  });

$('#dialog').find('.ok')
  .on('click', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});

function openDialog(selector) {
  $(selector)
    .clone()
    .appendTo('#overlay')
    .show()
    .parent()
    .fadeIn('fast');
  }

function closeDialog(selector) {
  $(selector)
    .parents('#overlay')
    .fadeOut('fast', function() {
       $(this)
         .find('.dialog')
         .remove();
       });
}

HTML スニペット:

  <div id="dialog" class="dialog">
     <a href="#" class="ok">Close Dialog</a>
  <div>

完全なコードはこちら: https://gist.github.com/sfcarroll/4739040

4

6 に答える 6

2

他の誰もがオブジェクトの代わりにセレクターにイベントを適用しているので、私は別の方法で行こうと思いました。

問題は、イベントを元の html に追加することですがclone、html をコピーするときに、イベントを一緒にコピーしないことです。引数として a を追加すると、次のtrueように設定する必要があります。

function openDialog(selector) {
  $(selector)
    .clone(true)
    .appendTo('#overlay')
    .show()
    .parent()
    .fadeIn('fast');
  }

ドキュメントを参照してください

于 2013-02-08T13:55:17.640 に答える
1 
$(document).ready(function(){
  $('#dialogOpen').click(function() {
    console.log("link clicked");
    openDialog('#dialog');
  });


});

function openDialog(selector) {
  $(selector)
    .clone()
    .appendTo('#overlay')
    .show()
    .parent()
    .fadeIn('fast');

    $('#dialog').find('.ok')
  .on('click', function() {
    console.log("ok clicked");
    closeDialog(this);
  });

}

function closeDialog(selector) {
  $(selector)
  .parents('#overlay')
  .fadeOut('fast', function() {
    $(this)
      .find('.dialog')
      .remove();
  });
}

デモ

最初に .dialog クラスを CSS を含む #dialog div に適用したdisplay:noneため、最初に DOM にはイベントをバインドできる div がないため、発生しませんでした。

于 2013-02-08T13:51:49.857 に答える
1

試してみてください ：

$('body').on('click', '.dialog .ok', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});
于 2013-02-08T13:44:30.200 に答える
1

このコード

$('#dialog').find('.ok')
  .on('click', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});

イベントを既存の html ノードにバインドします。new が作成される前に呼び出される#dialogため、これらの new#dialogには、 をクリックしたときに呼び出されるコールバックがありません.ok。その理由は.clone、複製された要素にバインドされたイベントを複製しないためです。

次のようにデリゲート ハンドルを使用します。

$(document).on('#dialog .ok', 'click', function () {
  // Your click handler here
});
于 2013-02-08T13:45:31.860 に答える
1

ボタン自体に .on を設定しています。バブルアップするときにクリックをキャッチできるように、親にある必要があります。試す：

$(document).on('click', '#dialog .ok', function() {
    console.log("ok clicked");
    closeDialog(this);
  })
});
于 2013-02-08T13:46:00.893 に答える
1

openDialog 関数では、ダイアログを複製して、その新しいインスタンスを作成しています。後でクリック イベントにバインドするか、 を使用$('#dialog .ok').live('click', data, handler);して新しい DOM 要素にバインドする必要があります。

于 2013-02-08T13:46:01.193 に答える