I made the jsfiddle working example. Have a look at: http://jsfiddle.net/SsqEv/
Basically I create a simple html markup:
<div id="container">
<div id="test1">click me</div>
</div>
And the following Javascript code:
// attach click event
$('#test1').click(function() {alert('test');});
// create a new strring that will be appended to the container
var data = '<div id="test2">click me 2</div>';
// move click handler from #test1 to #test2
data = $(data).bind("click", {}, $("#test1").data("events").click[0]);
// add element to the DOM
$("#container").append(data);
// remove click from #test1
$('#test1').unbind("click");
This all works. Now, let's assume I have a custom script with some jQuery contextMenu plugin and I attach the context menu to ul li
elements:
$("ul#vertical-menu li a[data-menuitemid]").contextMenu({
menu: 'myMenu',
beforeShow: function(contextMenu, item) {
if ($(item).parent('li').hasClass('state-ok')) {
$(contextMenu).children('.ready').hide();
} else {
$(contextMenu).children('.noready').hide();
}
}
}, function(action, el, pos) {
changeStatus(model.id, action, $(el).attr('data-menuitemid'), el);
});
Sometimes I need to remove li and when this is done, I need to attach the contextMenu in the same way. The best option would be to move the contextMenu from the removed li
to the added one. How can I achieve that?
EDIT: I am using this contextMenu: http://labs.abeautifulsite.net/archived/jquery-contextMenu/demo/
I would like to bind it 'live' to all ul li
elements, because I have difficulties attaching contextMenu to new dynamically added li
s. How can I achieve that?