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

Question

我正在尝试创建一个导航按钮click事件，但是jQuery on click事件似乎无法正常运行。当我单击按钮时，应该将一条消息记录到控制台。这是我的代码：

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

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

谢谢，哈里斯·米尔扎。

Answer 1

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

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

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

Answer 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!");
    });
});

Answer 3

hi，您可以显示您的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/