how js elements must work for new htm's loaded with ajax

Question

i have a page for view photos and users can submit comment on it
i write a js file name(ajax.js) to load new comment with ajax every 30 sec on that pages
i write another js file (name feed.js) for when user click on delete icon near every comment comment go hide and delete
codes 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);

when for first time user open this page its load last 10 comment
and everythings work fine and nice
but after 25-30 sec when new comment load with ajax my feed.js not work for new comments?
what i must to do about this?
i put feed.js load every time when new comments load buts its bad cuz in 10 minute user have about 20 feed.js loaded !
can i do something else?
thank you

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — omma2289, Sep 01 '13 at 10:28

omma2289 · Accepted Answer · 2013-09-01T10:44:11.517

1

You need event delegation, bind the event to the nearest static (not dynamically loaded) container and delegate the actions.

Change this:

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

To this:

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

I don't know how your markup looks like so I'm using the document as a fallback here.

Note: If you're using jQuery <1.7 use live() instead of on()

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

edited Sep 01 '13 at 10:44

answered Sep 01 '13 at 10:26

omma2289

54,161
8
64
68

i test it $(document).on('click','a[cm-del]',function(){ but still new comments cant be deleted - not work i use latest version of jquery – masih arastooee Sep 01 '13 at 10:40
sorry sorry ! i forget clear my cache its Work like charm ! soOOOOooOo many thanks – masih arastooee Sep 01 '13 at 10:42

score 0 · Answer 2 · answered Sep 01 '13 at 10:41

I think .live should work.

$('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(){
    });
});

If not work then do like this .. first change the feed.js like

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(){
         });
       });
 }

Now change ajax.js like

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 );

I think it will work. Thanks

score -1 · Answer 3 · answered Sep 01 '13 at 10:18

-1

I think you can fix that by changing first line of your feed.js code to this: $('a[cm-del]').live('click', function(){

answered Sep 01 '13 at 10:18

Alireza Ahmadi

1,541
18
22

i will test it.. i give you respone – masih arastooee Sep 01 '13 at 10:20

how js elements must work for new htm's loaded with ajax

3 Answers3