Javascript Jquery on（“单击”）don'；从下拉菜单中选择文本时不起作用

我正在使用bootstrap中的下拉菜单，并使用jquery更改选择时的下拉文本。当使用jquery动态创建下拉菜单时，问题就出现了。它不会在选择时更改下拉菜单的文本，但在html中已经存在的静态html上执行相同操作时，它会更改 下面是代码

<script>
 $(document).ready(function(){
      $(".btn-primary").on("click",function(){
      var htmltxt='<div class="dropdown"><button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button><ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu1"><li><a>Boolean</a></li><li><a>Character</a></li></ul></div>';
      $("body").append(htmltxt);
      });
 });
 $(".dropdown").ready(function(){
      $(".dropdown-menu li a").on("click",function(){
           var caret=' <span class="caret"></span>';
           $($(this).closest(".dropdown").find("button")[0]).text($(this).text()).append(caret);
      });
 });

$（文档）.ready（函数（）{
$（“.btn primary”）。在（“单击”，函数（）{
var htmlText='Datatypes
布尔值
字符
；
$（“正文”）。追加（htmltxt）；
});
});
$（“.dropdown”）.ready（函数（）{
$（“.a”下拉菜单）。在（“单击”，函数（）上）{
变量插入符号=“”；
$（$（this）.closest（“.dropdown”）.find（“button”）[0]）.text（$（this.text（））.append（插入符号）；
});
});

添加DropDrop



数据类型

布尔值
性格

第一个dropdowm菜单

id=“dropdownMenu2”

工作正常，但从jquery（js变量

htmltxt

）附加的第二个菜单

id=“dropdownMenu2”

将响应on（）事件。

更改：

$(".dropdown-menu li a").on("click",function(){ 

致：

---

但是下拉列表会附加到单击事件之前的页面上吗？

$(".dropdown-menu li a").on("click",function(){ 

$(document).on("click", ".dropdown-menu li a", function(){