Question

我已经动态创建了这些元素，单击#btnAgregar按钮：

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");

});

此代码工作正常。

我需要在元素“#btnEliminar”+ items

中添加一个click事件

如果我这样做，代码不起作用：

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

但是，如果我只是添加id“＃1”（创建的第一个元素），它可以正常工作。

EJ：

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

你能帮助我吗？

Answer 1

可以在创建对象时将其添加到对象中，也可以添加特定于该类型按钮的其他类。

使用class = btnEliminar：

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

您只需在页面加载代码中运行此代码一次

Answer 2

您希望将事件绑定到document或'body'或类似的内容。如果您希望匹配动态编号的元素，则可以使用div[id^="example"]之类的选择器来匹配以example开头的任何ID，例如<div id="example1">和<div id="example2">。

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

jQuery - 将click事件添加到动态创建的元素中

2 个答案: