jQuery 动态创建右键菜单并修改鼠标右击元素的值（解决依次右击多个元素后，修改值的时候多个元素的值皆被修改的bug）

本文介绍使用jQuery实现动态创建右键菜单的方法，并解决了在依次点击不同元素时修改元素值出现的问题。通过移除之前的菜单确保每次只显示一个菜单实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery 动态创建右键菜单并修改鼠标右击元素的值（解决依次右击多个元素后，修改值的时候多个元素的值皆被修改的bug）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="main.css">
  <script src="jquery-1.11.3.js"></script>
  <style type="text/css">
    .model01{  left:100px;top:100px;  }
    .model02{  left:200px;top:200px;  }
    .model03{  left:300px;top:300px;  }
    .model04{  left:400px;top:400px;  }
    .container{ width:100%; height: 1000px;}
  </style>
  <script>
    $(document).ready(function(){
      var rtClick = function (ele, coords) {
        console.log(ele, ele.attr("id"));
        var publicData = {};
        publicData.ele = ele;
        publicData.body = $("body");
        var rtMenus = '<div class="rt_menus">' +
            '<div></div>' +
            '<label for="uid">ID：</label>' +
            '<input type="text" id="uid" disabled />' +
            '<div></div>' +
            '<label for="uname">名字：</label>' +
            '<input type="text" id="uname" />' +
            '</div>';
        $(".rt_menus").remove();//加上此句解决 依次右击多个元素后，修改值的时候多个元素的值皆被修改的bug
        if (!publicData.body.find(".rt_menus")[0]) {
          publicData.body.append(rtMenus);
        }
        if (publicData.body.find(".rt_menus")[0]) {
          publicData.rtPanel = $(".rt_menus");
          publicData.rtPanel.css({"left": coords.x, "top": coords.y}).find("#uid").val(ele.attr("id"));
          publicData.rtPanel.find("#uname").val(publicData.ele.html());
          publicData.uname = publicData.rtPanel.find("#uname");
          publicData.uname.change(function (e) {
            //菜单面板修改目标元素的值
            publicData.ele.html($(this).val());
          });
        }
      };
      $(".container").on('mousedown','.model', function (e) {//绑定事件可选择父元素container，不可选择最外层如body；
        if (e.which == 3) {
          rtClick($(this), {x: e.clientX, y: e.clientY});
        }
        return false;
      });
      document.oncontextmenu = function () {
        return false;
      };
      $(".container").click(function () {
        $(".rt_menus").remove();
      });
    });
  </script>
</head>
<body>
<div class="container">
  <p class="model model01" id="model01" >01</p>
  <p class="model model02" id="model02" >02</p>
  <p class="model model03" id="model03" >03</p>
  <p class="model model04" id="model04" >04</p>
</div>
</body>
</html>