CODEWITHSUNDEEP
jqueryhtml
Gene Lim
Gene Lim

Reputation: 1068

jQuery Add button inside a add button function in jQuery

var counter3 = 1;
$("#addPoll").click(function () {
  if(counter3>5){
    alert("Only 5 Poll is allowed");
    return false;
  } 
  if(counter3==1){
    $("#removePoll").css("visibility","visible");
  }   
  var newTextBoxDiv = $(document.createElement('div'))
    .attr("id", 'TextBoxDiv1' + counter3);

  newTextBoxDiv.after().html(
    '<label>Question '+ counter3 + ' : </label>' + 
    '<input type="text" id="textbox' + counter3 + '" value="" name="textbox[]"><br></br>' +
    '<input type="button" value="Add Button" id="addPollButton'+counter3+'">'+
    '<input type="button" value="Remove Button" id="removePollButton">' +
    '<div id="TextBoxesGroup3"></div>'+
    //'<label>Number Of Answer : </label> <input type="text" id="textbox' + counter3 + '" value="" name="textbox[]">' +
    '<br></br><br></br>'
  );

  $("#addPollButton"+counter3).click(function (){
    alert("hahha");
  });

  newTextBoxDiv.appendTo("#TextBoxesGroup1");
  counter3++;
});

I have a problem here where I would want to add a button to function inside the jQuery. As for my code, I will want to prompt the alert("hahha"); when the button is clicked but it is not working. Is there a way to overcome this situation?

Thanks in advance.

Upvotes: 0

Views: 96

Answers (2)

Popnoodles
Popnoodles

Reputation: 28409

You could use on to delegation but it's simpler just to move one line

newTextBoxDiv.appendTo("#TextBoxesGroup1"); // to here

$("#addPollButton"+counter3).click(function (){
  alert("hahha");
});

// from here newTextBoxDiv.appendTo("#TextBoxesGroup1");
counter3++;

So that there are elements to match when you define the click event.

Upvotes: 2

bipen
bipen

Reputation: 36531

well use on delegated event for dynamically added elements..change your id to class and and use on delegated event

 newTextBoxDiv.after().html('<label>Question '+ counter3 + ' : </label>' + 
        '<input type="text" id="textbox' + counter3 + '" value="" name="textbox[]"><br></br>' +
        '<input type="button" value="Add Button" class="dynamicAddButton">'+
        '<input type="button" value="Remove Button" id="removePollButton">' +
        '<div id="TextBoxesGroup3"></div>'+
        //'<label>Number Of Answer : </label> <input type="text" id="textbox' + counter3 + '" value="" name="textbox[]">' +
        '<br></br><br></br>');

       /*you don't need click here.. and should avoid this in any case 
         $("#addPollButton"+counter3).click(function (){
            alert("hahha");
        });*/

      newTextBoxDiv.appendTo("#TextBoxesGroup1");counter3++;
 });


$(document).on('click','.dynamicAddButton',function(){
   alert("hahha");
});

NOTE: id should be unique...looks like your code ends up having multiple removePollButton id

update..

if you need id there then you can use attribute selector also..(no need of changing you code)

 $(document).on('click','[id^="addPollButton"]',function(){
   alert("hahha");
});

and yes please have a look at creating dynamic element in jquery and implement it so you code is more readable (instead of addind a string in DOM )

Upvotes: 2

Related Questions