Question

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

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

一起使用

任何想法？

Answer 1

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

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

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

然后你需要按如下方式绑定事件（事件委托）：

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

JQuery事件不起作用

1 个答案: