从下拉菜单中选择文本时，Jquery on("click") 不起作用

Question

我正在使用引导程序中的下拉菜单并使用 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);
      });
 });

<body>
 <div class="btn btn-primary"> Add DropDrop</div>
 <br></br>
  <div class="dropdown">
 <button class="btn btn-default dropdown-toggle changetext" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Datatypes <span class="caret"></span></button>
 <ul class="dropdown-menu scrollbar" aria-labelledby="dropdownMenu2">
      <li><a>Boolean</a></li>
      <li><a>Character</a></li>
 </ul></div>
 </body>

第一个 dropdowm-menu id="dropdownMenu2"工作正常，但从 jquery（js 变量htmltxt ）附加的第二个菜单id="dropdownMenu2"将响应 on() 事件。

Answer 1

改变：

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

到：

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

从下拉菜单中选择文本时，Jquery on("click") 不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-04-02 09:11:41

从下拉菜单中选择文本时，Jquery on(&quot;click&quot;) 不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-04-02 09:11:41

从下拉菜单中选择文本时，Jquery on("click") 不起作用

解决方案1
1 已采纳 2016-04-02 09:11:41