Question

我的目标是拥有一个显示自定义上下文菜单的可右键单击链接。我正在使用this方便的上下文菜单插件。我可以让它用于静态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/

Answer 1

在http://api.jquery.com/on/上使用，以使其适用于生成的元素或生活在较旧的jquery http://api.jquery.com/live/

Answer 2

除非您可以使用委托模式并使用父元素（$.on()方法和第二个参数选择器），否则您应该在$.contextmenu()处理程序中添加click调用;否则，事件处理程序尚未在 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/

上下文菜单不适用于Javascript生成的HTML

2 个答案: