-2
私は、マウスの右ボタンがクリックされたリスト項目のdata-id値を継承するカスタムコンテキストメニューを持っています。JQueryを使ってdata-idを動的に正しく渡す方法
もっと明示的に言えば、私には国のリストがあります。ユーザーがこれらの国（リスト項目）のいずれかを右クリックすると、コンテキストメニューが表示されます。私は、データID値をコンテキストメニューのリスト項目に渡す必要があります。
Elementsのインスペクタ/ウィンドウに表示されていることによると、データは正しく正常に渡されたようです。最初のクリックで、data-idが正常に取得されます。しかし、ユーザーが第2国をクリックしたり、アイテムを一覧表示すると、ユーザーが右クリックした最初の国のデータIDが引き出されます。私は間違って何をしていますか？
// 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">
\t <ul class="members-list">
\t \t <li class="member" data-id="south-africa">South Africa</li>
\t \t <li class="member" data-id="england">England</li>
\t </ul>
</div>
<div class="context-menu">
\t <ul class="context-menu-list">
\t \t <li class="context-menu-item" data-action="view">
\t \t \t <div class="menu-item">
\t \t \t \t View Member
\t \t \t </div>
\t \t </li>
\t \t <li class="context-menu-item" data-action="edit">
\t \t \t <div class="menu-item">
\t \t \t \t Edit Member
\t \t \t </div>
\t \t </li>
\t \t <li class="context-menu-item" data-action="delete">
\t \t \t <div class="menu-item">
\t \t \t \t Delete Member
\t \t \t </div>
\t \t </li>
\t </ul>
</div>私は要素検査のスクリーンショットを持っている：
これは、ファイルがどのように見えるかです。以下それらを見つけるしてください：。 
あなた自身をデバッグいくつかを行う必要があり、例えばバグを再現するコードに提供された例を絞り込む。 – alex
をあなたが唯一の関連するコードを配置する必要があります。 – Rajesh
注目、Rajesh。ありがとうございました。私はここからやります。 – lungaonline