jqueryでクリックされた要素idを取得する方法

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')); 
});