0

我想创建一个 div 标签的上下文菜单以将一些内容附加到其中。但是当我连续多次右键单击时，我的 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>

例如，如果我连续右键单击 5 次，在我的 div 中将包含 5 行“我的内容”虽然我只想要 1 行。谁能解释一下为什么和解决方案？非常感谢！

4

1 回答 1

1

尝试（见演示）：

$(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);  
  });
});​

交易是在您的版本中，#add每次用户打开上下文菜单时，您都会绑定到元素单击事件处理程序。因此，在 5 次之后，将有 5 个单击事件处理程序，因此，如果您然后单击#add元素，则将'<p>My Content</p>'字符串添加到#container元素 5 次。

于 2012-07-29T14:21:39.733 回答