如何在先前从jquery附加的div内的元素上使用jquery onClick函数

Question

I have appended some element inside a div with class .display_noti like :-

$(document).ready(function(){
setTimeout(done,200);
});

function done() {
setTimeout(updates, 200); // Call updates in 200ms
}

function updates(){

  $.getJSON("notification.php",function(data){  
    // you can do checking here
    if ( data.result && data.result.length > 0 ) {
       $(".display_noti").empty(); // Clear out the div  
       $.each(data.result,function(){  
         $(".display_noti").append("<div class='palnotific'>You got a pal request from <strong>"+this['from_user']+"</strong><br><span class='date'>"+this['notification_date']+"<form method='post'><input type='hidden' value='"+this['pals_id']+"'></form></div>");
       }); 
       done();
    }
    else {
          $(".display_noti").append("<div class='palnotific' style='background-color:white;'>You have no notification to view.</div>");
    }
  });
}

I have fetched data from database and converted it on json encode format and then I used that above jquery function to get,validate and add those information inside that div with class .display_noti .

As you guys can see i'm doing this all for my notification system so, every time this code checks new update available or not in my database.If there's some changes in database then in every 200 milliseconds element inside that .display_noti div which mean div with class .palnotific will automatically get updated without any page reload/refresh.

Now my problem is that every 200 milliseconds those appended div get vanish and then come again.It's good if there was any new update it will add on my .display_noti but it might be not that good if i want to add some jquery event handler function like onclick .I mean i want to add some onclick function on that appended div .I want to take that form input value and send it via ajax to some php file for the process and make some changes on database.What will be the proper way to do that in such case?Guys need help.

(In page things doesn't vanish.I was talking about source code where every 200 milliseconds things appear and vanish repeats)

Answer 1

$('document').on('click','.palnotific',function(){
    input_val = $(this).find(':input').val();

    //continue ajax here
});