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

【问题标题】：.remove() not working properly with ajax loaded content.remove() 无法与 ajax 加载的内容一起正常工作
【发布时间】：2013-01-18 13:29:03
【问题描述】：

我有一个链接，点击它会在 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 链接

有人知道是什么吗？

【问题讨论】：

好吧，我不知道你的css是什么样的，但是.close元素是空的，所以你确定你点击的是它而不是其他元素吗？此外，将console.log( $(this) ) 放入您的.ajax .close 点击事件中，以查看点击的元素是什么，或者是否找到了它。

标签： jquery

【解决方案1】：

将 Javascript 更改为：

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

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

【讨论】：

我猜$(this).closest(".ajax")会更好
我用这个 $('.ajax .close').click(function(){ $(this).closest(".ajax") }) 但没用 // 我也试过 $(document).on... 并遇到同样的问题
所以我敢打赌@Joonas 是对的。似乎与 close 类的链接没有宽度和高度，除非您在 css 中定义它。你确定你点击的是链接吗？

【解决方案2】：

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

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

查看这篇文章了解更多信息：Dynamically Adding Elements and trying to use the selectors .click event Jquery

http://jsfiddle.net/fTk6t/

【讨论】：

delegate 已过时。使用on
我也试过.on，但也没有用。我会读这篇文章。
我在 ajax 加载的 .php 文件中添加了脚本
将其移至将进行 ajax 调用的页面，并确保像我一样在 JQuery 中包含您的函数
现在我把它放在调用 ajax 的地方：$('#feedbackNoticia a').click(function(){ $.post('teste.php', function(data){ $('#noticiasBox .descricao').fadeOut(200); $('#noticiasBox .noticiaAberta').delay(200).fadeIn(200).html(data); }) }); $(document).on('.ajax .close', 'click', function(){ $('.ajax').remove(); }); 但知道它根本不起作用。我想我不能调用我调用 ajax 的地方，因为内容是动态添加的，它不会为加载的内容工作，对吗？

【解决方案3】：

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

谢谢大家！

【讨论】：