Button created with jQuery/JS, don't react to click [duplicate]

Question

I'm trying create a list of Messages a user can type in an textarea on the site and delete any of them using a button he automatically creates with each message. My idea is that I create a div in which I first put the message of the user in and then prepend the button with the same ID of the div; This way I call the ID of the button and remove all elements with the same ID.

<script>
var theButtonId = 1;
$(document).ready(function() {
$('#commentButton1').click(function() {
    var toAdd = $("textarea#commentTextarea1").val(); //Content to add
    var theId = "dieButtons"+theButtonId.toString(); //creating unique ID

    // Adding first Div      
    $('#targetField').append( 
        $('<div />', {
            id: theId,
            }));
    // Adding content
    $('#'+theId).append(
        $('<div />', {
             text: toAdd
             }));
    //(-----1-----)Adding Button        
    $('#'+theId).prepend(
         $('<button />', {
             type: 'button',
             id: theId,
             class: 'commentButton2',
             text: "-"
             }));
    theButtonId++;
    });
});
//Button Command
$(document).on("ready", function(){
  //(-----2-----)
$('.commentButton2').on("click", function(){  
   var thisId = $(this).attr("id");
       $("#"+thisId).remove();
});
});
</script>

It perfectly lists the elements in the #textfield I added a button directly in my HTML code which deletes certain divs, as well as itself using the code above. This is why I know that the Problem is that the created Buttons at (-----1-----) don't react to the command in (-----2-----)

I already tried to create an Input of type button and put a .click function instead of .on("click", [...]).

@Popnoodles the question you linked is also marked as duplicate :) — Ashraf Purno
– Ashraf Purno, Commented Sep 10, 2015 at 11:18
@dreamweiver My bad, I just started coding two weeks ago and oversaw this^^' Thanks for pointing it out :) — sankai
– sankai, Commented Sep 11, 2015 at 9:16

guradio · Accepted Answer · 2015-09-10 11:13:22Z

1

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

});

Use event delegation on dynamically created elements

DOCUMENTATION

answered Sep 10, 2015 at 11:13

guradio

15.6k4 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sankai Over a year ago

Ah, now I see! It worked finde, thanks!

AJN Over a year ago

Thanks a lot guradio. That helped for me too. Eventough, this scenario of dynamic list is very frequent, I have hard time finding a decent bootstrap documentation about this kind of details on how to use bootstrap elements (different scenarios, events, examples, ...)?

Zakaria Acharki · Accepted Answer · 2015-09-10 11:22:42Z

0

Working fiddle

Try to use :

$('#targetField').on("click",'.commentButton2', function(){

Instead of :

$('.commentButton2').on("click", function(){

It should work.

answered Sep 10, 2015 at 11:22

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

1 Comment

sankai Over a year ago

It didn't work for me and even blocked the static created buttons.. But got an answer from Pekka, thanks :)

Collectives™ on Stack Overflow

Button created with jQuery/JS, don't react to click [duplicate]

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related