0

当用户单击一个对象时，我想为其生成菜单。

$(".thumbImage").click(function(e){

    var xCoord = e.pageX;
    var yCoord = e.pageY;

    var content = "<div class='thumbMenu' id='tempMenu'>THE MENU IS HERE</div>";
    $(this).after(content);

    $("#tempMenu").css("visibility","visible");
    $("#tempMenu").css("left",xCoord-30);
    $("#tempMenu").css("top",yCoord-30);
    return false;

});

现在我希望当用户拿走鼠标时，id = "tempMenu" 的 div 应该被删除。如果用户单击其他 thumbImage，它不应该带来麻烦。

这是我现在的代码：

$(".thumbImage").mouseout(function(e){
    $("#tempMenu").remove();
    return false;
});

但它似乎效果不佳。

4

2 回答 2

0

我不知道您的完整 HTML 标记，因此我将body其用作选定元素。您可能需要更改它以供自己使用。我使用.on()事件处理程序 ( http://api.jquery.com/on/ ) 和mouseleave事件来删除您的#tempMenu.

jQuery 

$('body').on('mouseleave', '#tempMenu', function() {
     $(this).remove();
     return false;
});
于 2013-07-13T15:51:26.103 回答
0

可能您创建了多个具有相同 ID 的元素。如果通过单击它们有多个带有 thumbImage 类的元素，则在它们之后创建带有 id tempMenu 的元素。

也许你应该从创建的元素中删除 id 并像这样调用删除：

$(".thumbImage").mouseout(function(e){
    $(this).next(".thumbMenu").remove();
    return false;
});

你也可以像这样创建你的div：

var myDiv = $("<div/>", {
  "class" : "thumbMenu",
  text : "THE MENU IS HERE",
  "visibility": "visible",
  "left": xCoord-30,
  "top" : yCoord-30
})

$(this).after(myDiv);

链接到文档

于 2013-07-13T14:09:08.800 回答