How to get the ID of dynamically generated buttons

Question

I auto genrated some buttons

    <div class="wrapper" id="wrapper"></div>
<script type="application/javascript">
    var x, i, y;
    for(i = 0; i <= 10; i++){
        y = i;
        x = "<button class=btn_class"+y+"id=btn"+y+"onclick(alert(this.id);>Ukor</button>";
        $("#wrapper").append(x);
    }

    $("button").on("click", function(){
        alert(this.id);
    });
</script>

I want to be perform different action when any of the buttons are clicked. but i can't seem to get get the buttons by id. I also need to send y as an arguement to the function

Answer 1

The problem is that you have no spaces separating the attributes. So you're creating an element that looks like:

<button class=btnclass0id=btn0onclick(alert(this.id);>Ukor</button>

So everything is going into the class attribute. You should put quotes around the attribute values, and spaces between the attributes.

There's also no need for the onclick attribute, since you're using $("button").on("click", ...) to do that.

So it should be:

x = "<button class='btn_class"+y+"' id='btn"+y+"'>Ukor</button>";

You can also use jQuery's object-oriented way to create elements:

x = $("<button>", {
        "class": "btn_class" + y,
        "id": "btn"+y,
        text: "Ukor"
});

BTW, why do you put y in the class? Usually the point of classes is to have all the similar elements have the same class, so you can address them all at once.

Answer 2

It looks like you are building your HTML without the necessary spaces or punctuation between attributes, so your button HTML will look like this:

<button class=btn_class0id=btn0onclick(alert(this.id);>Ukor</button>

This means there is no id attribute.

Try fixing it up like this:

x = '<button class="btn_class' + y + '" id="btn' + y + '" onclick="alert(this.id);">Ukor</button>';
$("#wrapper").append(x);

...or better yet, use the jQuery API to build your DOM:

x = $('<button onclick="alert(this.id);">Ukor</button>').attr({
  id: 'btn' + y,
  className: 'btn_class' + y
});

Answer 3

Your problem is in the string formatting your code will generate

<button class=btnclass0id=btn0onclick(alert(this.id);>Ukor</button>

and you need:

<button class="btnclass0" id="btn0" onclick="alert(this.id);">Ukor</button>

 var x, i, y; for (i = 0; i <= 10; i++) { y = i; x = "<button class='btn_class" + y + "' id='btn" + y + "'>Ukor</button>"; $("#wrapper").append(x); } $("button").on("click", function() { alert(this.id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper" id="wrapper"></div> 

Answer 4

Add the content into a single string and then append it once into the dom - faster than appending each iteration. Then using a designated click event handler - alert the id of the button. And the classes need to be a common value - not unique like the id's. Also - you don't need "y" at all and if you need to send the number to a function you have it already in the id - just get the numerical portion of the id and you can use it as required.

  $(document).ready(function(){ var x=""; for(i = 0; i <= 10; i++){ x += "<button class='btn_class' id='btn"+i+"'>Ukor</button> "; } $("#wrapper").append(x); $(document).on('click','.btn_class', function(){ (alert($(this).attr('id'))) }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper" id="wrapper"></div> 

Answer 5

I recommend to use String template to avoid errors of spacing between attrs on concatenating -> Better in visibility of variables in String:

 $(Array.from({length:11},(v,k)=>k) .map((i)=>`<button class="btn_class${i}" id="btn${i}" onclick="alert(this.id)">Ukor${i}</button>`) .join('')).appendTo('#wrapper') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper" id="wrapper"></div>