Forループを使用して作成されたクリックされたボタンにアクティブなクラスを割り当てます。

Question

javascriptを使用して動的なボタンを作成しています。しかし、ボタンonClickに<li class="active">を割り当てることができません。私はjqueryを使用してアクティブなクラスを割り当てようとしましたが、これまでのところ作業がありませんでした。IDを使用したイベント処理の操作を適用してください。javascriptまたはjqueryを使用していれば良い解決方法はありますか？私はスタックオーバーフローで与えられたsoloutionをほぼ試しましたが、私にとってはうまくいきませんでした。

for (var i = 0; i <feature_layer.length ; i++) { 
<ul class="nav nav-pills"><a data-toggle="pill" class="mybtn" style="margin:25px;" id=' + mapport.selected_feature_layer[i] + '>' + layer_names[i] + '</a></li></ul>'; 
} 
$('.mybtn').click(function() { 
    var selected_id =$(this).attr('id'); 

}); 

Answer 1

ボタンが動的に作成されるため、イベント委任を使用する必要があります。ここで

$('body').on("click",".myBtn", function(e){ 
    $(this).addClass("active"); 
}); 

アクションのコードです：

var btn = document.createElement("button"); 
 
btn.innerHTML = 'this is a button'; 
 
btn.className = 'myBtn'; 
 
document.body.appendChild(btn); 
 

 
$('body').on("click",".myBtn", function(e){ 
 
    $(this).addClass("active").text("active"); 
 
});

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