上下文菜单不能与Javascript生成的HTML一起工作

Context menu does not work with Javascript generated HTML

本文关键字：HTML 一起 工作 菜单 不能 Javascript 上下文      更新时间：2023-09-26

我的目标是有一个显示自定义上下文菜单的可右击链接。我正在使用这个方便的上下文菜单插件。我可以让它为静态HTML内容工作，但是当使用javascript创建HTML时，右键单击不会触发我的自定义上下文菜单。它是否与动态创建HTML有关?

我创建HTML的代码是 
$('.cmenu1content a').contextmenu();
$('#add_stuff').click(function () {
    var $html = '';
    $html += '<div class="cmenu1content"><a data-context-menu=".cmenu1" href="#">But this doesnt</a><ul class="context-menu dropdown-menu cmenu1"><li><a href="#" id="cetstart">Set Start Time</a></li> <li><a href="#" id="cetend">Set End Time</a></li><li><a href="#" id="cet5">Center time (5 min)</a></li><li><a href="#" id="cet30">Center time (30 min)</a></li><li><a href="#" id="cet60">Center time (60 min)</a></li><li><a href="#" id="cet360">Center time (6 hour)</a></li></ul></div>'
    $(".not_working_link").empty().html($html);
});

这是我的情况的JSFiddle。上下文菜单插件从第1行到第75行，但我的代码从第77行开始。

http://jsfiddle.net/jonk1993/a2WYS/

除非您可以使用委托模式并从父元素(具有第二个参数选择器的$.on()方法)中工作，否则您应该在click处理程序中添加$.contextmenu()调用;否则，没有在new元素上设置事件处理程序，只在运行(上一个)调用时存在的元素上设置事件处理程序。

$('#add_stuff').click(function () {
    // This will create a documentFragment that after appended, can
    // still be worked on, as you see on the third line below.
    var $html = $('<div class="cmenu1content"><a ... blah blah ... </div>');
    // Note the use of `$.append()` instead of `$.html()`.
    $(".not_working_link").empty().append($html);
    $html.children('.cmenu1content a').contextmenu();
});
http://jsfiddle.net/a2WYS/7/

使用http://api.jquery.com/on/使其与生成的元素一起工作或在旧的jquery中使用http://api.jquery.com/live/

相关文章：