我试图在引导下拉菜单上实现单击事件

I'm trying to implement a click event on a bootstrap dropdown menu

本文关键字：实现 单击 事件 下拉菜单      更新时间：2023-09-26

嗨，我有一个引导下拉菜单，从数据库自动填充。我试图得到一个事件发生时，我点击菜单中的一个项目。我试过了

$("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()而不是.on():

$(function()
{
    $(".ddBtnClick").click(function(event) {  
        console.log("Is it working? Yes!!");
    });
});

还有一个错别字:

.addClass("ddBntClick")
应:

.addClass("ddBtnClick")
相关文章：