jQuery - Add click event to a dynamically created element

Question

I have dynamically created this elements clicking the #btnAgregar button:

var items = 0

$("#btnAgregar").click(function(){

  items = items + 1

  var item_name =  $("#itemLista").val();

  var $div_task = $("<div/>", { class: "div_task" }),
      $div_task_nombre = $("<div/>", { class: "div_task_nombre" }),
      $div_task_edicion = $("<div/>", { class: "div_task_edicion" }),
      $div_task_nombre_item = $("<p/>", {class: "item task_undone", text: item_name}),
      $div_task_edicion_btnEliminar = $("<button/>", {class: "btn btn-danger", type: "button", id: items}),
      $div_task_edicion_btnEliminar_span = $("<span/>", {class:"glyphicon glyphicon-minus"});

  $div_task.append(
                  $div_task_nombre.append(
                                          $div_task_nombre_item
                                        ), 
                  $div_task_edicion.append(
                                            $div_task_edicion_btnEliminar.append($div_task_edicion_btnEliminar_span)
                                          )
                  ).appendTo("#container_lista");

});

This code works fine.

I need to add a click event to the element "#btnEliminar"+items

If I do this, the code doesn't work:

$('body').on('click', '#'+items, function() {
  //Do something
});

But if I just add the id "#1" (first element created) it works fine.

Ej:

$('body').on('click', '#1', function() {
  //Do something
});

Can you help me?

I have to use an ID to select a specific element. I add x elements each one must have an id to identify it and make something with it. In the example that I've posted above, when I use the ID "#1" the code works fine because I've used it manually, but when I use a variable as an ID, "#"+items, it does not. — Rafael MosMad
– Rafael MosMad, Commented Mar 9, 2015 at 2:40

charlietfl · Accepted Answer · 2015-03-09 02:28:01Z

1

Can add it right to the object as you create it, or add another class that is specific to that type of button.

Using class = btnEliminar:

$('body').on('click', '.btnEliminar', function() {
  alert(this.id.replace('btnEliminar','');
});

you only need to run this code once within your page load code

answered Mar 9, 2015 at 2:28

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

8 Comments

Rafael MosMad Over a year ago

I have to use an ID to select a specific element. If I add x elements each one must have an id to identify it and make something with it. In the example that I've posted above, when I use the ID "#1" the code works fine because I've used it manually, but when I use a variable as an ID, "#"+items, it does not.

charlietfl Over a year ago

My code expects you to add that id, but also add a common class as well. The alert is parsing the ID. The reason to use class is it will cover many elements with different ID's

Rafael MosMad Over a year ago

The alert dialog is an example. I've just updated it on the code. When I use the ID "#1" the code works fine because I've used it manually, but when I use a variable as an ID, "#"+items, it does not. I don't understand why.

charlietfl Over a year ago

not clear what you are trying to do. I already showed you how to access id of element clicked this.id

charlietfl Over a year ago

Maybe you need to create another question with whatever code you are referring to

|

Andy Fleming · Accepted Answer · 2015-03-09 02:54:02Z

0

You want to bind the event to the document or 'body' or something similar. If you want match dynamically-numbered elements, you can use a selector like div[id^="example"] to match any ID that starts with example like <div id="example1"> and <div id="example2">.

$(document).on('click', 'div[id^="example"]', function() {
    console.log('element clicked');
});

answered Mar 9, 2015 at 2:54

Andy Fleming

7,9136 gold badges37 silver badges55 bronze badges

1 Comment

Rafael MosMad Over a year ago

How can I access to an ID using a variable? I've used "#"+variable, but I doesn't work.

Collectives™ on Stack Overflow

jQuery - Add click event to a dynamically created element

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related