Question

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

$(".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;

});

现在我希望当用户将鼠标移开时，div =＆＃34; tempMenu＆＃34;应该被删除。如果用户点击其他拇指图像，则不应该给它带来麻烦。

这是我现在的代码：

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

但它似乎并没有奏效。

Answer 1

您可能正在创建具有相同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);

Link to the documentation

Answer 2

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

<强>的jQuery

$('body').on('mouseleave', '#tempMenu', function() {
     $(this).remove();
     return false;
});

如何删除使用JQuery创建的DIV

2 个答案: