2

ajaxを介してコンテンツをコンテナー（#ajax_content）にロードしようとしています。外側をクリックしたときに、ajaxでロードされたコンテンツ（#ajax_content内のすべて）を閉じる（非表示にする）ことができるようにしたいと思います。しかし、内部の要素のonClickをバインドしたいと思います。

HTML：

   <div id="wrapper"> 
      <div id="ajax_content">
      </div>
   </div>

AJAXを介してロードされたHTML：

<button id="super_hello" >Click</button>

ajaxコンテンツがロードされるとHTMLは

   <div id="wrapper"> 
      <div id="ajax_content">
          <button id="super_hello" >Click</button>
      </div>
   </div>

Javascript：

$(document).ready(function(){

    $('.ajax_link').click(function(event) {
       event.preventDefault();

       $.get($(this).attr('href'), function(data) {

            $('#ajax_content').html('');
            $('#ajax_content').append(data);

            $('#ajax_content').css({
                visibility: 'visible'
            });

        });

    });

    $('#ajax_content').click(function(event){

         event.stopPropagation();

    });

    $('#wrapper').click(function(){
        $('#ajax_content').hide();
        $('#ajax_content').html('');

        $(this).hide();
    });

});

    $(document).on("click","#super_hello",function(e){
        alert('clicked'); // I can't get this to work
    });

問題：コメントすると

$('#ajax_content').click(function(event){

     event.stopPropagation();

});

イベントはsuper_helloにバインドされますが、ajax_content内でクリックすると、ラッパーに伝播され、ajax_contentが閉じられます。

4

1 に答える 1

2

次のようなラッパーのクリック ハンドラーで、コンテンツからのクリックを直接除外できます。

$('#wrapper').click(function(e) {
    if (!$(e.target).closest('#ajax_content').length) {
        $('#ajax_content').hide();
        $('#ajax_content').html('');
        $(this).hide();
    }
});

#ajax_contentラッパーにはありませんが、ラッパー内のコンテンツにはある IDを持つ親要素があるかどうかを確認します。

一方、ラッパーとコンテンツに特定のサイズが設定されていない限り、ほとんどの場合、コンテンツはラッパー全体を満たし、クリックはラッパーに登録されません.FIDDLEを参照してください。

于 2012-08-20T04:19:12.790 に答える