jQuery上下文菜单 - 找到触发它的元素

我正在尝试为我的页面编写上下文菜单选项。基本上右键单击一个div，弹出一个选项菜单，可用于执行任务。jQuery上下文菜单 - 找到触发它的元素

我的问题是试图找到触发一切的原始元素（即右键单击的div）。

我jQuery代码是或多或少：

//this is what displays the context menu 
$('.outfeedPosition').bind("contextmenu", function (e) { 
    $('#contextMenu').css({ 
     top: e.pageY + 'px', 
     left: e.pageX + 'px' 
    }).show(); 

    //'this' is the element which was clicked by the user. 
    alert($(this).attr('id')); 

    return false; 
}); 



//this is the contextMenu's button handler. 
$('#ctxDelete').click(function() { 
    alert('delete was clicked, but i dont know by which element - so I dont know which one to delete'); 
}); 


<div id="contextMenu"> 
    <ul> 
     <li><a id="ctxInsert" href="#">Insert</a></li> 
     <li><a id="ctxEdit" href="#">Edit</a></li> 
     <li><a id="ctxDelete" href="#">Delete</a></li> 
    </ul> 
</div>

- 所以 - 我可以看到什么元素创建活动时最初右击发生。但是当菜单项被点击时不行。

我一直在通过将元素写出到隐藏文本框中，然后在单击其中一个选项时读取该元素，然后在菜单关闭时将其删除，从而将它们混淆在一起。虽然看起来不是理想的方法 - 我觉得我缺少一些基本的东西。

希望你看到我想要做的。我可以根据要求发布更完整的示例。

来源

2010-12-13 jb.

您可以考虑使用jQuery data storage方法。

在上下文菜单的代码，你可以把：

$('.outfeedPosition').bind("contextmenu", function (e) { 
    $('#contextMenu').css({ 
     top: e.pageY + 'px', 
     left: e.pageX + 'px' 
    }).show(); 

    //Store the item that was clicked 
    $("#contextMenu").data('originalElement', this); 

    return false; 
});

然后，当你想引用发起点击的元素，你可以这样做：

$('#ctxDelete').click(function() { 
    var originalElement = $("#contextMenu").data('originalElement'); 
    alert('delete was clicked by ' + originalElement.id); 
});

而且在把originalElement jQuery函数$()来访问jQuery的善良。放置数据的位置并不重要，因为任何DOM元素都可以具有与之关联的数据。您可以存储任何内容 - 在上面的示例代码中，我存储了HTMLElement raw（不是jQuery化），但如果需要，也可以存储它。

在这里看到一个小例子：http://www.jsfiddle.net/jonathon/sTJ6M/

来源

2010-12-13 15:07:20

两种说法：1.您正在使用选择器引擎多次查找#contextMenu元素。缓存该jQuery对象是合理的：'var $ contextMenu = $（“＃contextMenu”）;'2.防止initialElement被定义是个好主意，在这种情况下'originalElement.id'会抛出一个错误。 – 2010-12-13 16:23:07

干杯Šime。我同意你的观点，但我并不太在意重构。我只是插入OP的代码，并明确了如何使用数据方法。在这种情况下，而不是缓存对象，你可以从链接中受益，而不需要额外的变量:) – 2010-12-13 16:29:56

感谢Jonathon，那就是我所需要的！ – 2010-12-14 13:11:52

我添加一个隐藏字段，然后找到它基于点击，这样的：

<div class="myItem"> 
    <div id="contextMenu"> 
     <ul> 
      <li><a id="ctxInsert" href="#">Insert</a></li> 
      <li><a id="ctxEdit" href="#">Edit</a></li> 
      <li><a id="ctxDelete" href="#">Delete</a></li> 
     </ul> 
    </div> 
    <input type="hidden" class="myID" value="1"> 
</div>

然后使用jQuery

$('#ctxDelete').click(function() { 
    var id = $(this).closest('.myItem').find('.myID').val(); 
    alert('delete was clicked, by element with ID = ' + id); 
});

来源

2010-12-13 14:56:01 Jason

你可能想看看在数据存储方法 - 它可以节省不必创建这样的事情隐藏输入型（并让您保存任何对象，而不仅仅是字符串）：HTTP：//api.jquery。com/category/miscellaneous/data-storage/ – 2010-12-13 15:16:43

看起来很酷，但问题是..当它执行左键单击时会触发.. +1虽然:) – 2010-12-13 15:17:02

多数民众赞成的重点是不是吗？ – Jason 2010-12-13 20:18:50

我有点迟到了这里，但我发现，生成上下文菜单时主动项获得加入“上下文菜单中激活状态”类到它。这可能只是在更新的版本。我正在使用上下文菜单1.6.6。

只需添加：

var originalElement = $('.context-menu-active');

上下文菜单句柄。这里它与示例代码结合在一起。

$(function(e){ 
    $.contextMenu({ 
     selector: '.context-menu-one', 
     callback: function(key, options) { 
      var originalElement = $('.context-menu-active'); 
      var m = "clicked: " + originalElement[0].innerHTML; 
      window.console && console.log(m); 
     }, 
     items: { 
      "edit": {name: "Edit"}, 
      "cut": {name: "Cut"}, 
      "copy": {name: "Copy"}, 
      "paste": {name: "Paste"}, 
      "delete": {name: "Delete"}, 
      "sep1": "---------", 
      "quit": {name: "Quit"} 
     } 
    }); 

    $('.context-menu-one').on('click', function(e){ 
     console.log('clicked', this); 
    }) 
});

来源

2015-09-18 22:50:17 NAZ

jQuery上下文菜单 - 找到触发它的元素

回答

相关问题