js 元素必须如何为加载 ajax 的新 htm 工作

Question

我有一个查看照片的页面，用户可以对其发表评论
我编写一个 js 文件名 (ajax.js) 以在该页面上每 30 秒使用 ajax 加载新评论
当用户单击每个评论附近的删除图标时，我编写了另一个 js 文件（名称 feed.js）隐藏和删除
代码 feed.js：

$('a[cm-del]').click(function () {
    var cmid = $(this).attr('cm-del');
    var typeid = $(this).attr('data-type');
    $('li[last-id=' + cmid + ']').effect('pulsate');
    $('li[last-id=' + cmid + ']').hide(300);
    $.post('/post/comment.php', {
        cmdelete: cmid,
        type: typeid
    }, function () {});
});
codes ajax.js:

function getmorecmphoto() {
    $('li[data-hiv]').hide();
    var lastid = $('li[last-id]:last').attr('last-id');
    if (lastid === '') {
        var lastid = 0;
    }
    var oldcm = $('div[comments-id]').html();
    var photoid = $('div[comments-id]').attr('comments-id');
    $.post('/post/photo.php', {
        lastid: lastid,
        photoid: photoid
    }, function (getlastcmphoto) {
        $('div[comments-id]').html(oldcm + getlastcmphoto);
    });
}
setInterval(getmorecmphoto, 25000);

当用户第一次打开此页面时，它会加载最后 10 条评论
一切正常
但是在 25-30 秒后，当新的评论用 ajax 加载时 我的 feed.js 不适用于新 cmets？
我该怎么办？
我每次加载新的 cmets 时都会加载 feed.js，但在 10 分钟内用户加载了大约 20 个 feed.js！
我可以做点别的吗？
谢谢

Answer 1

您需要事件委托，将事件绑定到最近的静态（非动态加载）容器并委托操作。

改变这个：

$('a[cm-del]').click(function(){

到这里：

$(document).on('click','a[cm-del]',function(){

我不知道您的标记是什么样的，所以我在这里使用文档作为后备。

注意：如果您使用 jQuery live() 而不是 on()

$('a[cm-del]').live( 'click', function(){

Answer 2

我认为 .live 应该可以工作。

$('a[cm-del]').live("click",function(){
    var cmid = $(this).attr('cm-del');
    var typeid = $(this).attr('data-type');
    $('li[last-id='+cmid+']').effect('pulsate');
    $('li[last-id='+cmid+']').hide(300);
    $.post('/post/comment.php',{cmdelete:cmid,type:typeid},function(){
    });
});

如果不工作，那么就这样做.. 首先像

一样更改 feed.js

function SetEvent(){
      $('a[cm-del]').unbind("click").click(function(){
         var cmid = $(this).attr('cm-del');
         var typeid = $(this).attr('data-type');
         $('li[last-id='+cmid+']').effect('pulsate');
         $('li[last-id='+cmid+']').hide(300);
         $.post('/post/comment.php',{cmdelete:cmid,type:typeid},function(){
         });
       });
 }

现在改变 ajax.js 之类的

function getmorecmphoto(){
    $('li[data-hiv]').hide();
    var lastid = $('li[last-id]:last').attr('last-id');
    if(lastid === ''){
        var lastid = 0;
    }
    var oldcm = $('div[comments-id]').html();
    var photoid = $('div[comments-id]').attr('comments-id');
    $.post('/post/photo.php',{lastid:lastid,photoid:photoid},function(getlastcmphoto){
        $('div[comments-id]').html(oldcm + getlastcmphoto);
         SetEvent();
    });
}
setInterval( getmorecmphoto, 25000 );

我认为它会起作用。谢谢

Answer 3

我认为您可以通过将 feed.js 代码的第一行更改为以下内容来解决此问题：$('a[cm-del]').live('click', function(){