时间戳

首页 > 解决方案 > 将初始化绑定到动态创建的元素

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

问题描述

我有一个 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);

}

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

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

标签： javascriptjquerysyncfusion

解决方案

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

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

推荐阅读