We are using kendo context menu in our code.After context menu initialization if we remove the target element and again we added the target to DOM context menu is not working .How to solve this issue.
HTML
<ul id="menu">
<li>delete</li>
</ul>
<div class="parent" id="ParentDiv" style="width: 200px; height: 200px;">
</div>
Script
$(".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>');
It should work if you invoke setOptions
and define again the target
. Your code would be something like:
$(".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>