功能单击不适用于右键单击 li 元素

Question

Right click menu appears when I press right click on <a href="#" class="sim-row-edit" data-type="link">Portfolio</a>

Right menu appears with 3 options:

<ul class='custom-menu'>
  <li data-action = "first">First thing</li>
  <li data-action = "second">Second thing</li>
  <li data-action = "third">Third thing</li>
</ul>

When I click on these li elements, I should get a message which I am not getting.

Below is my code:

 // when we're about to show the context menu, show our own instead $(document).on("contextmenu", function (event) { // Avoid the real one if this is the link if ($(event.target).hasClass("sim-row-edit")) { event.preventDefault(); // Show contextmenu $(".custom-menu").show(100). css({ top: event.pageY + "px", left: event.pageX + "px" }); } }); // hide our context menu when the document is clicked $(document).on("mousedown", function () { $(".custom-menu").hide(100); }); $(".custom-menu li").click(function(){ alert("hii"); // This is the triggered action name switch($(this).attr("data-action")) { // A case for each action. Should personalize to your actions case "first": console.log("first"); break; case "second": console.log("second"); break; case "third": console.log("third"); break; } });

 .custom-menu { display: none; z-index:1000; position: absolute; background-color:#fff; border: 1px solid #ddd; overflow: hidden; width: 120px; white-space:nowrap; font-family: sans-serif; -webkit-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); } .custom-menu li { padding: 5px 10px; } .custom-menu li:hover { background-color: #4679BD; cursor: pointer; }

 <link href="style.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="script.js"></script> <a href="#" class="sim-row-edit" data-type="link">Portfolio</a> <ul class='custom-menu'> <li data-action = "first">First thing</li> <li data-action = "second">Second thing</li> <li data-action = "third">Third thing</li> </ul>

The code $(".custom-menu li").click(function(){... is not working.

Answer 1

You've just to use mouseup instead of mousedown so the click event can be triggered before hidding the target element :

$(document).on("mouseup", function() {
    $(".custom-menu").hide(100);
});

 // when we're about to show the context menu, show our own instead $(document).on("contextmenu", function(event) { // Avoid the real one if this is the link if ($(event.target).hasClass("sim-row-edit")) { event.preventDefault(); // Show contextmenu $(".custom-menu").show(100). css({ top: event.pageY + "px", left: event.pageX + "px" }); } }); // hide our context menu when the document is clicked $(document).on("mouseup", function() { $(".custom-menu").hide(100); }); $(".custom-menu li").click(function() { alert("hii"); // This is the triggered action name switch ($(this).attr("data-action")) { // A case for each action. Should personalize to your actions case "first": console.log("first"); break; case "second": console.log("second"); break; case "third": console.log("third"); break; } });

 .custom-menu { display: none; z-index: 1000; position: absolute; background-color: #fff; border: 1px solid #ddd; overflow: hidden; width: 120px; white-space: nowrap; font-family: sans-serif; -webkit-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); } .custom-menu li { padding: 5px 10px; } .custom-menu li:hover { background-color: #4679BD; cursor: pointer; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#" class="sim-row-edit" data-type="link">Portfolio</a> <ul class='custom-menu'> <li data-action="first">First thing</li> <li data-action="second">Second thing</li> <li data-action="third">Third thing</li> </ul>

Answer 2

I fixed it using the same syntax as for dynamic elements:

$(document).on("click", ".custom-menu li", function(e) { ...