Question

我正在使用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);
      });
 });

<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>

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

Answer 1

更改：

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

致：

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

从下拉菜单中选择文本时，Jquery on（“click”）不起作用

1 个答案: