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

Question

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

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

上面的代码使用.block类初始化每个元素，以在ID为#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);

}

并在按钮上的click事件上添加了我拥有的新元素：

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