为什么我的 jQuery on click 事件不起作用？答案

【问题标题】：Why my jQuery on click event not working?为什么我的 jQuery on click 事件不起作用？
【发布时间】：2014-09-25 18:25:12
【问题描述】：

我正在尝试制作导航按钮单击事件，但单击事件上的 jQuery 似乎无法正常运行。当我单击该按钮时，它应该向控制台记录一条消息。这是我的代码：

$(document).ready(function () {
    'use strict';
    $('.dropdown-toggle').on('click', function (event) {
        console.log("It's Working Jim!");
    });
});

dropdown-toggle 类应用于包含文本的 div（我也尝试过使用 span），dropdown 类应用于包含 div 的 li。在决定发布自己之前，我已经浏览了至少 15 个其他类似的主题。

提前致谢，哈里斯·米尔扎。

【问题讨论】：

标签： javascript jquery html console click

【解决方案1】：

如果.dropdown-toggle 元素是动态添加的（我假设它们会这样做），那么您必须将您的事件委托给该元素：

$(document).ready(function () {
    'use strict';
    $(document).on('click','.dropdown-toggle', function (event) {
        console.log("It's Working Jim!");
    });
});

假设您使用的是正确版本的 jQuery（即您的 jQuery 支持 on()），所有这些都是可能的

【讨论】：

【解决方案2】：

它正在工作

如果您试图让它在移动设备上运行，我建议您在“vclick”事件中使用。

参见示例：http://jsfiddle.net/m3Q5F/

<div class= "dropdown-toggle">
        on click
</div>

$(document).ready(function () {
    'use strict';
    $('.dropdown-toggle').on('click', function (event) {
        console.log("It's Working Jim!");
    });
});

【讨论】：

【解决方案3】：

您好，您能否展示您的 html 或告诉我您使用的是支持功能的正确 jquery 版本。它工作正常。在动态添加的 div 上。

$(document).ready(function () {
    'use strict';
    $('ul li').append("<div class= 'dropdown-toggle'> on click </div> ");

    $('ul li div.dropdown-toggle').on('click', function (event) {
        console.log("It's Working Jim!");
    });
});

这是我的 jsfiddle 链接 http://jsfiddle.net/m3Q5F/1/

【讨论】：