My custom context menu should inherit the data-id value of the list item that was right-clicked.
Specifically, I have an unordered list of countries. When a user right-clicks on any of these countries (list items), a context menu pops up. The goal is to pass the data-id value to the list items in the context menu.
Upon inspection in the Elements window, it appears that the data is being passed correctly initially. However, when a user clicks on a different country, the data-id still reflects the first country clicked. What could be causing this issue?
This is how the file is structured:
// Code for handling ESC key event,
$(document).bind("keyup", function(event) {
// If ESC key 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");
});
});
}
});
// On document click event,
$(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 captured screenshots from the Elements inspector. Please refer to them here: https://i.sstatic.net/HRHJB.png