bootstrapのドロップダウンリストで選択した際に反応させたい

Question

nodeで小規模システムを作っています。
50項目程度のループを回して、各項目にドロップダウンリストを設置しました。そこまでは正常なのですが、実際そのリストのなにかをクリックした際に反応させたいのですが書き方が分かりません。

	　$('#bar').append($('<td class="dropdown"><button type="button" class="btn btn-secondary dropdown-toggle" id="btn100' + num + '" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">' + hantei2 + '</button><div class="dropdown-menu" aria-labelledby="bn100' + num +'"><a class="dropdown-item" value="メニュー1">メニュー1</a><a class="dropdown-item" value="メニュー2">メニュー2</a><a class="dropdown-item" value="メニュー3">メニュー3</a><div class="dropdown-divider"></div><a class="dropdown-item" value="他">その他リンク</a></div>'));

みずらくて大変申し訳ありません。
hantei2というのはただの文字列。複数ボタンを作るので、100＋num（連番）としてすべてのボタンにidを振っています。

そこでまず、

$("[id=btn100" + num + "]").click(function() {
		console.log(1234); 
	});

は反応するのですが、

$("[id=btn100" + num + "].dropdown-menu.dropdown-item").click(function() {
		console.log(1234); 
	});

ではエラーも出ない代わりに反応もしません。
実際には選ばれた「メニュー１、２，３，そのほかのメニュー」という文字列をボタンの文字列に置き換えようと思っていますが、まずはクリック処理に反応がなく困っています。

よろしくお願いします。

Answer 1

セレクタをくっつけると並列（同じ要素内の対象）になるので、
現在の書き方だと.dropdown-menuも.dropdown-itemもボタンのclassとして指定されているものとして要素を探します。そうではないのでイベント付与されず何も起きない。
「配下」としたいのでしたら、離す必要があります。

$("[id=btn100" + num + "] .dropdown-menu .dropdown-item")

コード一部なので想像でしかないですが、ループ内でイベント付与してますか？
同じクラス振られてるならidなくても良いような

$(".dropdown-menu .dropdown-item")

Event.currentTargetで「イベントが発生した自身」が取れるのでそこから分岐なり動的なデータをdata属性で受け取ったり、ループ内で付与しなくても出来るようになります。
要件次第ですけどね。

ただ、動的に生成される要素なのでしたらdocumentから監視しないといけないような。

$(document).on("click","[id=btn100" + num + "] .dropdown-menu .dropdown-item",function(){

})