1

次の問題:「#window-hidden」という非表示の div コンテナーがあります。ユーザーがリンクをクリックすると、リンクされたドキュメントの HTML が AJAX によってこの div コンテナーに挿入される必要があります (これまでのところ動作しています)。このコンテナーもドラッグ可能である必要があります (これまでのところ動作しています)。この div コンテナーを再度非表示にすると、問題が発生します。

私のコード:

$('.top_navigation .address a').click(function() {
  var myUrl = SOME CODE TO GET THE URL - WORKING;
  $('#window-hidden').load(myUrl, function() {
    var closer = '<div id="closer"><a href="#">X</a></div>';
    $(this).prepend(closer);
    $(this).fadeIn();
    });
  return false;
});

$('#window-hidden').draggable();

$('#closer a').on('click', function() {
  $('#window-hidden').fadeOut();

});

コードの最初のブロックは、HTML を div コンテナーにロードし、"closer" 要素をコンテナーに追加します。これまでのところ、すべて問題ありません。2 番目のブロックは、コンテナーをドラッグ可能にします。そして、コードの最後のブロックで、ウィンドウをもう一度閉じたかったのですが、機能しません。親コンテナ（#window-hidden）がドラッグ可能だからでしょうか？それとも、DOM の構築後に #closer 要素が挿入されているためでしょうか??

ベスト、トバイアス

4

3 に答える 3

2

clickイベントは、ドキュメント対応のDOMに存在する要素でのみ機能します。必要なものを実現するには、 on（jQuery 1.7以降を使用している場合）またはdelegate（以前のjQueryバージョンの場合）のいずれかを使用する必要があります。バージョンに応じて、次のいずれかを試してください。

on：

$("#window-hidden").on("click", "#closer a", function () {
    $('#window-hidden').fadeOut();
});


delegate：

$("#window-hidden").delegate("#closer a", "click", function () {
    $('#window-hidden').fadeOut();
});
于 2013-02-26T09:15:27.200 に答える
0

ページの読み込み後に挿入された dom 要素のイベントをリッスンするには、on メソッドを使用する必要があります。この場合、次のようになります。

$('#window-hidden').on('click', '#closer a', function() {
    $('#window-hidden').fadeOut();
});

詳細については、http: //api.jquery.com/on/を参照してください。

于 2013-02-26T09:18:12.523 に答える
0

問題は、このコードがここにあることだと思います

$('#closer a').on('click', function() {
  $('#window-hidden').fadeOut();

});

ページが読み込まれるときに実行されますが、リンクがクリックされると「近い」div が DOM に挿入されます。そのため、クリック ハンドラを「近い」div にアタッチしようとしている時点では、まだ存在していません。クリック ハンドラーにアタッチするイベント ハンドラーを入れてみることはできますか? コピーするだけで、次のようになります。

$('.top_navigation .address a').click(function() {
  var myUrl = SOME CODE TO GET THE URL - WORKING;
  $('#window-hidden').load(myUrl, function() {
    var closer = '<div id="closer"><a href="#">X</a></div>';
    $(this).prepend(closer);

    $('#closer a').on('click', function() {
        $('#window-hidden').fadeOut();
    });

    $(this).fadeIn();
    });
  return false;
});

$('#window-hidden').draggable();

乾杯、アレックス

于 2013-02-26T09:18:25.610 に答える