将初始化绑定到动态创建的元素

Question

我有一个 HTML 页面，其中有一些元素已使用 Syncfusion 小部件 ejMenu 使用以下代码初始化：

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

上面的代码用 .block class 初始化每个元素，在 id #contextMenu.

的元素中定义一个菜单

问题是我正在使用 class .block 动态创建其他元素，我希望它们具有与其他元素相同的行为，但未显示菜单。

有没有办法让 ejMenu 也对新创建的元素起作用？

更新

我在添加新元素后立即添加了 ejMenu 的重新初始化，但它不起作用，仍然是相同的行为。

这是 "fiddle" 您可以在其中看到它的实际效果： 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);

}

以及在添加新元素的按钮上的单击事件我有：

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

Answer 1

最好先通过实例销毁之前渲染的上下文菜单，然后再为动态元素渲染它

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

将初始化绑定到动态创建的元素

Binding initialization to dynamically created elements

javascript

jquery

syncfusion