jquery - .remove() 无法与 ajax 加载的内容一起正常工作

Question

我有一个链接，点击它会在 div 上加载 ajax 内容：

html:

<div class="noticiaAberta"></div>

ajax函数：

$('#feedbackNoticia a').click(function(){
    $.post('teste.php', function(data){
        $('#noticiasBox .descricao').fadeOut(200);
        $('#noticiasBox .noticiaAberta').delay(200).fadeIn(200).html(data);
    })
});

这是ajax文件：

<div class="ajax">
    <a class="close"></a>
    <img src="assets/images/temp/noticia-clicada.jpg" alt="">
    <h1>teste adf asdf laskdfjl aksdjfl kasjdflk jasdlfk jasldkf jasd asdfk lahsdfkl jhasdkfj hasdfkhj</h1>
    <div class="pNoticias">
        <p>teste</p>
    </div>
</div>
<script type="text/javascript">
    $('.ajax .close').click(function(){
        $('.ajax').remove();
    })
</script>

ajax 工作正常，但删除功能不能正常工作，当我点击它时，只删除.close链接

有人知道它是什么吗？

Answer 1

将Javascript更改为：

$(document).on('click','.ajax .close', function(){
    $('.ajax').remove();
})

这样，您将确保与指定选择器匹配的任何动态创建的元素都将附加处理程序。

Answer 2

您的函数应该在 JQuery 中定义，并且您应该使用委托来自动绑定来自 Ajax 结果的所有新元素。

  $(function(){
     $(document).delegate('.ajax, .close', 'click', function(){
         $('.ajax').remove();    
     });
  });

有关更多信息，请参阅此帖子：动态添加元素并尝试使用选择器 .click 事件 Jquery

http://jsfiddle.net/fTk6t/

Answer 3

我刚刚解决了这个问题。问题是.ajaxdiv 没有高度，我放了一个float:left并解决了问题-.-

谢谢大家！