[英]I'm trying to implement a click event on a bootstrap dropdown menu
嗨,我有一个从数据库自动填充的bootstrap下拉菜单。 当我点击菜单中的某个项目时,我正试图让事件发生。 我试过了
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
“.ddBtnClick”是分配给列表中每个项目的类。 但什么都没发生。 以下是从数据库填充列表的代码。
$.getJSON("http://jeremiah.abrahamott.com/DadsCarsObjects.txt", function(data){
$.each(data.aaData, function(i, option){
$("#dropdownfill").append($('<li/>').append($('<a/>').attr("id", option.Year).attr("href", "#").attr("tabindex", "-1").addClass("ddBntClick").text(option.Make)))
});
});
这是下拉列表的html。
<div class="row" style="margin-left:50px;">
<div class="span3">
<div class="btn-group">
<a class="btn dropdown-toggle" data- toggle="dropdown" href="#">Make
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" id="dropdownfill">
</ul>
</div>
</div>
</div>
问题与您的className有关。 您正在为ddBtnClick
注册委派的事件处理程序,但实际的类名是ddBntClick
。
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
和
.addClass("ddBntClick");
在构造期间更改类名或更改事件委派。
$(function()
{
$("body").on("click", ".ddBntClick", function(event) {
console.log("Is it working? Yes!!");
});
});
您是否尝试过在document.ready
事件中包装Javascript?
$(function()
{
$("body").on("click", ".ddBtnClick", function(event) {
console.log("Is it working? Yes!!");
});
});
有关更多信息和示例,请参阅jQuery .ready()
文档 。
此外,你应该登记的实际按钮的Click事件和使用.click()
代替.on()
$(function()
{
$(".ddBtnClick").click(function(event) {
console.log("Is it working? Yes!!");
});
});
另外,你有一个错字 :
.addClass("ddBntClick")
应该:
.addClass("ddBtnClick")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.