CODEWITHSUNDEEP
jquery
user3067524
user3067524

Reputation: 527

jquery dynamically created button click is not working

I am dynamically, using jquery clone and append, creating a remoce button. When i clicked on remove button, i am trying to remove cloned section. I cannot even see alert when clicked on remove button.

 var uniqueId = 1;
  $('#AddCC').click( function() {

    var copyDiv = $("#CCPanel").clone();
    var divID =  'CCPanel' + uniqueId;      
    copyDiv.attr('id',divID);
    var removeID = "removeCard";

   $("#CCcontainer").append(copyDiv);
   $("#CCcontainer").append("<input type=\"button\" value=\"Remove Card\" id=" + removeID + ">");


         $('#' + divID).find('input,select').each(function(){
            $(this).attr('id', $(this).attr('id') + uniqueId); 

         });
         uniqueId++;  

}); 


$("#removeCard").bind('click',function () {
alert("I am here");
if(uniqueId==1){
      alert("No more textbox to remove");
      return false;
   }   

uniqueId--;

    $("#CCPanel" + uniqueId).remove();

 });

Click add another Card button to clone the section and see remove button DEMO

Upvotes: 0

Views: 101

Answers (1)

Venkata Krishna
Venkata Krishna

Reputation: 15112

Use event delegation

$(document).on('click','#removeCard',function () {

instead of

$("#removeCard").bind('click',function () {

Upvotes: 1

Related Questions