Javascript 在jquery中使用contextmenu时出错？_Javascript_Jquery_Dom_Contextmenu

Javascript 在jquery中使用contextmenu时出错？

javascript jquery dom

Javascript 在jquery中使用contextmenu时出错？,javascript,jquery,dom,contextmenu,Javascript,Jquery,Dom,Contextmenu,我想创建一个div标签的contextmenu，在其中添加一些内容。但是，当我连续多次右键单击时，我的div标记包含的内容超出了我的需要 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test</title> <style type="text/css"> #container{ widt

我想创建一个div标签的contextmenu，在其中添加一些内容。但是，当我连续多次右键单击时，我的div标记包含的内容超出了我的需要

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
#container{
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
}
#MyMenu{

position: absolute;
border: 1px solid blue;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#container').bind('contextmenu',function(e){
e.preventDefault();
var x=e.pageX;
var y=e.pageY;
$('#MyMenu').css({'top': y+'px','left': x+'px'}).show();
$('#add').click(function(e){
  var ContentToAppend='<p>My Content</p>';
  $('#container').append(ContentToAppend);  
});
}); 
});
</script>

</head>

<body>

<div id="container">

</div>
<ul id="MyMenu">
<li><a href="#" id="add">Add</a></li>
<li><a href="#" id="del">Delete</a></li>
</ul>
</body>

</html>


试验
#容器{
宽度：500px；
高度：500px；
边框：1px纯红；
位置：相对位置；
}
#我的菜单{
位置：绝对位置；
边框：1px纯蓝色；
}
$（文档）.ready（函数（）{
$（'#container'）.bind（'contextmenu'，function（e）{
e、 预防默认值（）；
var x=e.pageX；
var y=e.pageY；
$（'#MyMenu'）.css（{'top'：y+'px'，'left'：x+'px'））.show（）；
$（'#添加'）。单击（函数（e）{
var ContentToAppend='My Content'；
$（“#容器”）.append（ContentToAppend）；
});
}); 
});

例如，如果我连续右键单击5次，在我的div中将包含5行“我的内容”，尽管我只需要1行。有人能为我解释一下原因和解决方案吗？非常感谢

试试看（参见）：

$（文档）.ready（函数（）{
$（'#container'）.bind（'contextmenu'，function（e）{
e、 预防默认值（）；
var x=e.pageX；
var y=e.pageY；
$（'#MyMenu'）.css（{'top'：y+'px'，'left'：x+'px'））.show（）；
}); 
$（'#添加'）。单击（函数（e）{
var ContentToAppend='My Content'；
$（“#容器”）.append（ContentToAppend）；
});
});

协议是，在您的版本中，每次用户打开上下文菜单时，您都绑定到

#add

元素单击事件。因此，5次之后，会有5次点击事件，因此，如果您随后单击

#add

元素，您将

'我的内容'

字符串添加到

#container

元素中5次。

谢谢我使用了此代码。如果我有许多div标记，class=container而不是id=container。我如何使用此上下文菜单将内容附加到每个div标记（class=container）我右键单击。我认为var contentto出现在scope$（'#add'）。click（）。那么为什么它会出现5次，尽管我单击了add 1次。哦，我明白了。非常感谢。如果我有很多div标记，class=container而不是id=container。我如何使用此contextmenu将内容附加到每个div标记（class=container）中我右键点击。谢谢你的解决方案。非常感谢，斯佩兰斯基·丹尼尔！哦，我是新会员。我该怎么做呢？我的问题属性中找不到。

$(document).ready(function(){
  $('#container').bind('contextmenu',function(e){
    e.preventDefault();

    var x=e.pageX;
    var y=e.pageY;

    $('#MyMenu').css({'top': y+'px','left': x+'px'}).show();
  }); 

  $('#add').click(function(e){
    var ContentToAppend='<p>My Content</p>';
    $('#container').append(ContentToAppend);  
  });
});