javascript - 在自定义上下文菜单中单击 li 后没有反应

Question

我编写了一个简单的上下文菜单，它在单击无序列表的 li 后出现。单击上下文菜单中的 li 后，我需要显示一个警报，但没有任何反应。

我使用了 jquery 函数 on(取代了 delegate())，因为上下文菜单是在运行时动态生成的:

$(".contextMenu").on("click", "li", function() {
    var c = $(this).attr("class");
    alert("Klassname:" + c);
});

但是没有任何反应。我现在一头雾水。

请将以下脚本添加到您的 tampermonkey 引擎中并尝试一下。

// ==UserScript==
// @name         Burning Series
// @namespace    http://bs.to/
// @version      1.0
// @description  -
// @author       Me
// @match        https://bs.to/andere-serien
// @require      https://code.jquery.com/jquery-3.3.1.min.js
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle('.contextMenuParent { position: relative;  }');
GM_addStyle('.contextMenuContainer { position: absolute; background: gray; z-index: 100; -webkit-box-shadow: 10px 10px 31px -1px rgba(0,0,0,0.75);-moz-box-shadow: 10px 10px 31px -1px rgba(0,0,0,0.75);box-shadow: 5px 5px 15px -1px rgba(0,0,0,0.75);}');
GM_addStyle('.contextMenu { display: grid; padding: 4px; top: 0; left: 25px; width: 200px; border: 1px solid black;  color: black; }');
GM_addStyle('.contextMenu li { border-bottom: 1px solid gray; }');
GM_addStyle('.contextMenu li:hover { cursor: pointer; color: red; }');

var contextMenuLinks =
    "<li class='contextMenu01'>A</li>"+
    "<li class='contextMenu02'>B</li>" +
    "<li class='contextMenu03'>C</li>" +
    "<li class='contextMenu04'>D</li>" +
    "<li class='contextMenu05'>E</li>" +
    "<li class='contextMenu06'>F</li>";


$(document).ready(function() {

    $("div.genre > ul > li").each(function(i, obj) {

        $(this).addClass("contextMenuParent");

        $(this).contextmenu(function(e) {
            e.preventDefault();

            $(".contextMenuContainer").remove();
            $(this).append("<div class='contextMenuContainer'><ul class='contextMenu'>" + contextMenuLinks + "</ul></div>");
        });
    });

    $(".contextMenu").on("click", "li", function() {
        var c = $(this).attr("class");
        alert("test:" + c);
    });
});

Here是目标页面。

Answer 1

因为您要添加 <li>元素 append()方法，这就是为什么 li 上的点击事件元素直接绑定(bind)而不是委托(delegate)，这意味着只有当元素已经存在于 DOM 中而不是动态创建的元素上时事件才会起作用

所以你需要绑定(bind)一个 event delegation 这里有更高级别的元素，如 body或 document .

试试这个:

$(document).on("click", ".contextMenu li", function() {
  var c = $(this).attr("class");
  alert("Klassname:" + c);
});