How to properly pass data-id dynamically using JQuery

Question

I have a custom context menu that should inherit the data-id value of the list item on which the right mouse button was clicked.

To be more explicit, I have an unordered list of countries. When a user right clicks on any one of these countries (list items), a context menu pop us. I want the data-id value to be passed on to the list items of the context menu.

According to what I see on the Elements inspector/windows, the data seems to be passed properly and successfully. On first click, the data-id is pulled successfully. However, when the user clicks on a second country, or rather list item, it still pulls the data-id of the first country the user right clicked on. What am I doing wrong?

This is how the file looks like:

 // When the ESC key is pressed, $(document).bind("keyup", function(event) { // If ESC is pressed, if (event.keyCode == 27) { // Hide Context Menu $('.context-menu').hide(); $('.context-menu').each(function() { $(this).find("li").each(function() { var current = $(this); current.removeAttr("data-id"); }); }); } }); // When user clicks on document, $(document).on("click", function() { $('.context-menu').hide(); // hide context menu $('.context-menu').each(function() { $(this).find("li").each(function() { var current = $(this); current.removeAttr("data-id"); }); }); }); $(document).ready(function() { $('.members-list').on("contextmenu", "li", function(e) { e.preventDefault(); var id = $(this).data("id"); $('.context-menu').each(function() { $(this).find("li").each(function() { $(this).attr("data-id", id); }); }) $('.context-menu') .css({ top: e.pageY + 'px', left: e.pageX + 'px' }) .show(); }); $('.context-menu').on("click", "li", function() { var id = $(this).data("id"); var action = $(this).data("action"); switch (action) { case "view": alert("View: " + action + " " + id); break; case "edit": alert("Edit: " + action + " " + id); break; case "delete": alert("Delete: " + action + " " + id); break; } // Hide Context Menu $('.context-menu').hide(); // Remove data id $('.users-menu').each(function() { $(this).find("li").each(function() { var current = $(this); current.removeAttr("data-id"); }); }); }); });

 *, *::before, *::after { margin: 0; padding: 0; outline: 0; } ul, ol { list-style: none; } .members-list li { color: ghostwhite; cursor: pointer; display: block; background: black; padding: 4px; margin-bottom: 2px; } .context-menu { display: none; padding: 2px; position: absolute; background: ghostwhite; } .context-menu li { padding: 6px; cursor: context-menu; border-bottom: 1px solid gray; } .context-menu li:last-child { border-bottom: 0; } .context-menu li:hover { color: ghostwhite; background: gray; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="members"> <ul class="members-list"> <li class="member" data-id="south-africa">South Africa</li> <li class="member" data-id="england">England</li> </ul> </div> <div class="context-menu"> <ul class="context-menu-list"> <li class="context-menu-item" data-action="view"> <div class="menu-item"> View Member </div> </li> <li class="context-menu-item" data-action="edit"> <div class="menu-item"> Edit Member </div> </li> <li class="context-menu-item" data-action="delete"> <div class="menu-item"> Delete Member </div> </li> </ul> </div>

I have screen shots of the Elements inspection. Please find them below:

Answer 1

Hi Replace the following code

var id = $(this).data("id"); with var id =$(this).attr("data-id"); 

in after this line $('.context-menu').on("click", "li", function()

it will help you check that and tell me if you have any problems