Question

我在这里创建一个购物清单，我有一个文本框输入项目并提交按钮以将项目添加到数组。提交项目被推送到数组，列表将更新。我想要做的是当我点击任何列出的项目，我应该能够得到它的ID，但我无法得到它。我怎么解决这个问题？

这就是我所做的：

'use strict';
(function() {
  var itemslist = [];
  $('#addList').click(function(e) {
    var item = $('#itemname').val();
    if (item == '') {
      alert('Cannot be empty!')
      return false;
    } else {
      e.preventDefault();
      itemslist.push(item);
      update();
    }
  })

  var update = function() {
    $('#shopList').empty();
    itemslist.forEach(function(value, index) {
      $('#shopList').append("<section id='" + index + "' class='items-list'>" + value + "</section>") //list-item gets appended after the successful push of item to array
    })
  }

  $('.items-list').click(function() {
    console.log(this.id); //unable to get the clicked element id
  })

})(window);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <form method="post" name="listform">
    <input id="itemname" type="text" value="" name="item" placeholder="Ex: butter and milk" required>
    <button class="btn btn-peace" id="addList"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to List</button>
  </form>
</div>
<div id="shopList">
</div>

Answer 1

$(this).attr('id')

应该做的伎俩

该功能不起作用，因为它没有绑定到动态创建的元素。

要绑定它，请在层次结构中选择一个较高的元素，然后检查单击了哪个元素。你可以这样做：

$(body).on('click','.items-list', function() {
    console.log($(this).attr('id') );
});

如何在jquery中获取单击的元素id

1 个答案: