Привязка инициализации к динамически создаваемым элементам - PullRequest
Новая
       15

Привязка инициализации к динамически создаваемым элементам

0 голосов
/ 21 марта 2019

У меня есть HTML-страница, где у меня есть некоторые элементы, которые я инициализировал с помощью виджета Syncfusion ejMenu , используя следующий код: 

$("#contextMenu").ejMenu({
  menuType: ej.MenuType.ContextMenu,
  openOnClick: false,
  contextMenuTarget: '.blocks'
});

Приведенный выше код инициализирует каждый элемент с.block класс для определения меню в элементе с идентификатором #contextMenu.

Проблема в том, что я динамически создаю другие элементы с классом .block, и я хотел бы, чтобы они имели то же самоеповедение, как и другие, но меню не отображается.

Есть ли способ, чтобы ejMenu мог работать и над вновь созданными элементами?

ОБНОВЛЕНИЕ

Я добавил реинициализацию ejMenu сразу после добавления нового элемента, но он не работает, все то же поведение.

Вот «скрипка», где вы можете увидетьэто в действии: https://jsplayground.syncfusion.com/qymetmtd (Синие блоки - это те, где включено контекстное меню)

Новые элементы добавляются путем клонирования существующего элемента, а затем добавляются в контейнер: 

function addNewRow() {
    lineCount = lineCount + 1;    
    var $row = $('#template .activity-row').clone();
    $('.event', $row).attr('id', 'event' + lineCount);
    $('.event', $row).html('New Event');

    $('.lines', $row).attr('id', 'line' + lineCount);
    $('.blocks', $row).attr('id', 'block' + lineCount); 

    $('.content', $row).html('This is a new activity!');

    $('#contentContainer').append($row);

}

и оn событие click на кнопке, которая добавляет новый элемент, который у меня есть: 

$('#addNewEvent').on('click', function () {
    addNewRow();
    $("#contextMenu").ejMenu({
        menuType: ej.MenuType.ContextMenu,
        openOnClick: false,
        contextMenuTarget: '.blocks'
    });
});

1 Ответ

2 голосов
/ 22 марта 2019

Лучше уничтожить ранее визуализированное контекстное меню с помощью его экземпляра, прежде чем снова отобразить его для динамического элемента 

$('#addNewEvent').on('click', function () {
  addNewRow();
  var obj = $("#contextMenu").data("ejMenu"); // Accessing control's instance
  obj.destroy(); // Use the destroy method from the instance
  $("#contextMenu").ejMenu({
    menuType: ej.MenuType.ContextMenu,
    openOnClick: false,
    contextMenuTarget: '.blocks'
  });
});

Модифицированный пример: https://jsplayground.syncfusion.com/fw2sqwb0

...