Question

我们在我们的代码中使用了kendo上下文菜单。如果我们删除目标元素后再次上下文菜单，我们再次将目标添加到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>');

Answer 1

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

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

<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'));

Answer 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>

Kendo-UI上下文菜单

2 个答案: