Question

我正在尝试通过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>

HTML一旦加载ajax内容将

   <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的包装器。

Answer 1

您可以直接在您点击包装器的处理程序中过滤掉内容中的任何点击，例如：

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

将检查是否存在具有#ajax_content ID的父元素，包装器没有，但包装器内的内容确实有。

另一方面，只要包装器和内容没有设置特定的大小，很可能内容填充整个包装器，并且不会在包装器aynway上注册任何单击，请参阅FIDDLE

如何绑定ajax加载元素上的事件

1 个答案: