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

时间:2016-04-02 09:03:41

标签: javascript jquery html css twitter-bootstrap

我正在使用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()事件。

1 个答案:

答案 0 :(得分:1)

更改:

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

致:

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