jquery - 如何在ajax加载的元素上绑定(bind)事件

Question

我正在尝试通过 ajax 将内容加载到容器中 (#ajax_content)。我希望当我单击外部时能够关闭(隐藏)ajax 加载的内容(#ajax_content 中的所有内容)。但我想绑定(bind)里面元素的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();

}); 

事件绑定(bind)到 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 的父元素，包装器不具有该 ID，但包装器内的内容具有该 ID。

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