我正在使用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()事件。
答案 0 :(得分:1)
更改:
$(".dropdown-menu li a").on("click",function(){
致:
$(document).on("click", ".dropdown-menu li a", function(){