JQuery 事件不起作用答案

【问题标题】：JQuery event doesn't workJQuery 事件不起作用
【发布时间】：2014-05-12 15:19:33
【问题描述】：

我在页面上有一个按钮。这是代码。

var button = "<button title = " + obj.hostname + "&#44;&#32;" + gpu.toUpperCase() +
        // " data-content = \"" + img1 + "\"" +
        " data-id=\"" + detailed_summary + "\"" +
        " data-text = \"" + obj.hostname + ", " + gpu.toUpperCase() + ", " + metric_name[metric] + ":&#32;" + display_val + "\"" +
        " class=\"btn " + button_state + " gpu btn-lg open-InfoModal\"" +
        " data-toggle=\"modal\" " +
        " rel=\"popover\" " +
        " data-target=\"#hostInfo\" " +
        " href=\"#infoModal\"></button>";

当我尝试这个 jQuery 代码时，它不起作用。

$("button.btn").on("mouseenter", function(event){
    event.preventDefault();
    event.stopPropagation();
    console.log("MouseEnter"); 
    });

我已将选择器更改为.btn、gpu、btn-lg、open-InfoModal。但它不起作用。我也尝试过更改mouseover，hover。但是当我将选择器更改为li时，它就可以了。

一个li 中包含180 个按钮。我不希望输出与 li

一起使用

有什么想法吗？

【问题讨论】：

你是动态添加按钮吗？
我在jquery中添加html...
尝试将类设置为仅“btn”
我试过了，结果还是一样，检测不到，不知道为什么。很奇怪
确保您已经在文档就绪函数中编写了上述事件代码。$(document).ready(function(){}) 能否提供完整代码

标签： jquery jquery-selectors mouseevent mouseenter

【解决方案1】：

您在上面显示的是变量中的按钮标记。您没有向我们展示您是否实际将标记添加到 DOM，如果是，则说明与事件绑定相关的时间。

如果在事件绑定后将按钮添加到 DOM：

$( document.body ).append( button ); //for example

那么你需要如下绑定事件（事件委托）：

$(function() {
  $(document).on("mouseenter","button.btn", function(event){
    event.preventDefault();
    event.stopPropagation();
    console.log("MouseEnter"); 
  });
});

【讨论】：