Контекстное меню не работает с HTML, сгенерированным Javascript

#javascript #jquery #html

#javascript #jquery — запрос #HTML #jquery

Вопрос:

Моя цель — создать ссылку с возможностью щелчка правой кнопкой мыши, которая показывает пользовательское контекстное меню. Я использую этот удобный плагин контекстного меню. Я могу заставить его работать со статическим HTML-контентом, но при создании html с использованием javascript щелчок правой кнопкой мыши не запускает мое пользовательское контекстное меню. Имеет ли это какое-то отношение к динамическому созданию 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/

1. Это потому, что элемент, который вы добавляете при нажатии, не имеет обработчика событий. Самый простой способ — добавить его, когда вы добавляете его в click обработчик путем вызова $('.not_working_link .cmenu1content a').contextmenu(); .

2. Вот так: jsfiddle.net/a2WYS/6 Обратите внимание, что я изменил его на $html = $($html); и использовал $.append() вместо $.html() , чтобы я все еще мог ссылаться на него позже.

Ответ №1:

Если вы не можете использовать шаблон делегирования и работать из родительского элемента ( $.on() метод со вторым селектором аргументов), вам следует добавить $.contextmenu() вызов в click обработчик; в противном случае обработчик событий не был установлен для нового элемента, только для тех, которые существовали при выполнении (предыдущего) вызова.

 $('#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/

Ответ №2:

Использовать на http://api.jquery.com/on / для того, чтобы оно работало с сгенерированными элементами или работало в более старом jquery http://api.jquery.com/live /