Question

I append Data received from Ajax, it also contains a divison with class bsubmit.
When the page loads then if i click on the div containing class bsubit the below function executes But when i click on the new appended data which also contains class bsubmit then the below code isn’t working.

Here is the code

     $(function() {
    $(".bsubmit").click(function() {
    var id = $(this).parent().parent().attr("id");
    var comm= document.getElementById(id).getElementsByClassName("commentadd")[0].value;


      $.ajax({
       type: "POST",
       url: "comment.php",
       data: {id:id, comm:comm},
       cache: false,
       success: function(data){
        $('.addcomment').slideUp('slow', function() {

        });

// Bottom Line not working

        $("#"+id).find(".item_comment").append(data);   // DATA Contains a div with class bsubmit
         $(data).appendTo("#"+id).find(".item_comment"); // Now these Appended Div isnt calling this function again,  Why ? I want to call them again
        $('#load').fadeOut();
      }

     });


    return false;
        });


    });

Answer 1

Your problem is that you are binding a click event to the .bsubmit class, but that click event gets attacked only to the .bsubmit already in the document, not the newly created ones.

So, what you need to do is, either use live() or on() depending on your Jquery version.

Change this line:

$(".bsubmit").click(function() {

to

Jquery LIVE

$(".bsubmit").live("click", function() {

or

Jquery ON

$(".bsubmit").on("click", function() {