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

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

1 个答案: