jjzjj

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

coder 2023-08-05 原文

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

我的问题是试图找到触发所有内容的原始元素(即右键单击的 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>

-- 所以 - 我可以看到当初始右键单击发生时是什么元素创建了事件。 但不是在单击菜单项时。

我正在努力通过右键单击元素时将元素写到隐藏的文本框，然后在单击其中一个选项时读取它，然后在菜单关闭时将其删除来摸索一些东西。 虽然这似乎不是理想的方法 - 我觉得我缺少一些基本的东西。

希望您看到我正在尝试做的事情。 我可以根据要求发布更完整的示例。

最佳答案

您可以考虑使用 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(不是 jQueryified)，但如果您愿意，您也可以存储它。

请参阅此处的小示例:http://www.jsfiddle.net/jonathon/sTJ6M/

关于jQuery 上下文菜单 - 查找触发它的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4430015/

jQuery上下文39codesectionhtmlcsscontextmenu

有关jQuery 上下文菜单 - 查找触发它的元素的更多相关文章

  1. ruby - 触发器 ruby​​ 中 3 点范围运算符和 2 点范围运算符的区别 - 2

    请帮助我理解范围运算符...和..之间的区别，作为Ruby中使用的“触发器”。这是PragmaticProgrammersguidetoRuby中的一个示例:a=(11..20).collect{|i|(i%4==0)..(i%3==0)?i:nil}返回:[nil,12,nil,nil,nil,16,17,18,nil,20]还有:a=(11..20).collect{|i|(i%4==0)...(i%3==0)?i:nil}返回:[nil,12,13,14,15,16,17,18,nil,20] 最佳答案 触发器(又名f/f)是

  2. ruby-on-rails - Rails - 乐观锁定总是触发 StaleObjectError 异常 - 2

    我正在学习Rails，并阅读了关于乐观锁的内容。我已将类型为integer的lock_version列添加到我的articles表中。但现在每当我第一次尝试更新记录时，我都会收到StaleObjectError异常。这是我的迁移:classAddLockVersionToArticle当我尝试通过Rails控制台更新文章时:article=Article.first=>#我这样做:article.title="newtitle"article.save我明白了:(0.3ms)begintransaction(0.3ms)UPDATE"articles"SET"title"='dwdwd

  3. ruby - 当使用::指定模块时，为什么 Ruby 不在更高范围内查找类？ - 2

    我刚刚被困在这个问题上一段时间了。以这个基地为例:moduleTopclassTestendmoduleFooendend稍后，我可以通过这样做在Foo中定义扩展Test的类:moduleTopmoduleFooclassSomeTest但是，如果我尝试通过使用::指定模块来最小化缩进:moduleTop::FooclassFailure这失败了:NameError:uninitializedconstantTop::Foo::Test这是一个错误，还是仅仅是Ruby解析变量名的方式的逻辑结果？ 最佳答案 Isthisabug,or

  4. ruby-on-rails - 如何在 Rails Controller Action 上触发 Facebook 像素 - 2

    我有一个ruby​​onrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素

  5. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  6. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  7. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  8. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  9. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  10. ruby - 在 Ruby 中，在类方法的上下文中，什么是实例变量和类变量？ - 2

    如果我有以下一段Ruby代码:classBlahdefself.bleh@blih="Hello"@@bloh="World"endend@blih和@@bloh到底是什么？@blih是Blah类中的一个实例变量，@@bloh是Blah类中的一个类变量，对吗？这是否意味着@@bloh是Blah的类Class中的一个变量？ 最佳答案 人们似乎忽略了该方法是类方法。@blih将是常量Bleh的类Class实例的实例变量。因此:irb(main):001:0>classBlehirb(main):002:1>defself.blehirb

随机推荐