Kendo-UI Context Menu答案

【问题标题】：Kendo-UI Context MenuKendo-UI Context Menu
【发布时间】：2014-10-28 11:26:44
【问题描述】：

我们在代码中使用剑道上下文菜单。在上下文菜单初始化后，如果我们删除目标元素并再次将目标添加到 DOM 上下文菜单中，则无法正常工作。如何解决此问题。

HTML

<ul id="menu">
   <li>delete</li>       
</ul>
<div class="parent" id="ParentDiv" style="width: 200px; height: 200px;">            
</div>

脚本

 $(".parent").append('<div><div> <div class="child">item 1</div><div class="child">item 2</div><div class="child">item 3</div></div></div>');
 $("#menu").kendoContextMenu({
     orientation: "vertical",
     target: ".child",
  });
 $(".parent").empty();
 $(".parent").append('<div><div> <div class="child">item 1</div><div class="child">item 2</div><div class="child">item 3</div></div></div>');

【问题讨论】：

纯猜测，您需要再次初始化菜单小部件吗？
不，即使我们删除并添加了目标元素，我们也需要上下文菜单
我们需要删除并添加 div。因为 div 是在我们的代码中动态创建和添加的

标签： jquery kendo-ui kendo-contextmenu

【解决方案1】：

您可以创建独立的上下文菜单项，然后在指定的锚点上打开它。要做到这一点，您应该使用 alignToAnchor 选项和方法 open 以锚点作为第一个参数

每次使用不同元素显示上下文菜单时，无需重新创建上下文菜单。只需用不同的锚点打开它。

<div id="target">Target</div>
<ul id="context-menu">
    <li id="Item1">Item 1
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
<li>Item 2
    <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
            <li>Sub Item 3</li>
        </ul>
    </li>
</ul>
<script>
// initialize the ContextMenu
$("#context-menu").kendoContextMenu({
    target: "#target",
    alignToAnchor: true
});
// get a reference to the ContextMenu widget
var contextMenu = $("#context-menu").data("kendoContextMenu");
// open the ContextMenu at 100px, 100px
contextMenu.open($('#target'));

【讨论】：

显示您的代码。如果您在问题中销毁小部件，则可能导致内存泄漏，并且每次添加小部件时都需要重新初始化小部件。所以我建议像我的例子一样使用独立的小部件。
我们只删除目标元素而不是菜单

【解决方案2】：

如果您调用setOptions 并再次定义target，它应该可以工作。您的代码将类似于：

$(".parent").append('<div><div> <div class="child">item 1</div><div class="child">item 2</div><div class="child">item 3</div></div></div>');
$("#menu").kendoContextMenu({
    orientation: "vertical",
    target: ".child",
});
$(".parent").empty();
$(".parent").append('<div><div> <div class="child">item 1</div><div class="child">item 2</div><div class="child">item 3</div></div></div>');
// Redefine target
$("#menu").setOptions({target: ".child"});

$(document).ready(function () {
  $(".parent").append('<div><div> <div class="child">item 1</div><div class="child">item 2</div><div class="child">item 3</div></div></div>');
  $("#menu").kendoContextMenu({
    orientation: "vertical",
    target: ".child"
  });
  $("button").on("click", function() {
    $(".parent").empty();
    $(".parent").append('<div><div> <div class="child">item 4</div><div class="child">item 5</div><div class="child">item 6</div></div></div>');
    $("#menu").data("kendoContextMenu").setOptions({target: ".child"});
  });
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>

  <button id="button" class="k-button">Change</button>
  <ul id="menu">
    <li>delete</li>
  </ul>
  <div class="parent" id="ParentDiv" style="width: 200px; height: 200px;">
  </div>

【讨论】：