上下文菜单不适用于新内容

Question

我有上下文菜单，它正在按我想要的方式工作，但是一旦我使用 ajax 将更多内容发送到页面，上下文菜单在新内容中就不起作用了！

这是我的JavaScript：

$(".image").contextMenu({
     menu: 'myMenu'
  }, function(action, el, pos) {
     if (action == "test1") {
            // function
     } else if (action == "test1") {
            // function
     } else if (action >= 0 ) {         
            // function
     } else if (action == "test3") {
            // function
     } else {
            // function
     }
});

.HTML

 <div class="old-real-content">
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
</div>

页面加载后，我使用 ajax 附加新数据：

<div class="new-apeneded-data">
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
<div class="image"><img src="img1.png" /></div>
</div>

为什么上下文菜单只适用于"旧真实内容"？附加"新数据"后如何使其也能工作？

Answer 1

Jquery Contextmenu 插件不需要重新初始化新添加的元素，如果它们在函数定义中使用了相同的类。在您的情况下，以下代码将按class="image"处理所有元素。在此处查找更多详细信息

$(function(){
    $.contextMenu({
        selector: '.image', 
        callback: function(key, options) {
            var m = "clicked: " + key;
            window.console && console.log(m) || alert(m); 
        },
        items: {
            "edit": {name: "Edit", icon: "edit"},
            "cut": {name: "Cut", icon: "cut"},
            "copy": {name: "Copy", icon: "copy"},
            "paste": {name: "Paste", icon: "paste"},
            "delete": {name: "Delete", icon: "delete"},
            "sep1": "---------",
            "quit": {name: "Quit", icon: "quit"}
            // and other menus
        }
    });
});

Answer 2

如果你

在函数上使用，应该可以工作：

$('body').on('mouseover', ".image", function(e)  { 
 e.preventDefault();
 //Add your custom function for context menu here!
 contextMenu();
}

添加到正文的所有 class="image" 元素都应受到事件的影响，即使它们是在页面完全加载后添加的。

Answer 3

这是因为当你写$(".image").contextMenu()时，这意味着你正在将新事件绑定到页面上的现有.image。当您装箱/加载更多元素时，您应该对它们应用$(".image_new").contextMenu()。

解决方案之一是将事件侦听器附加到图像，如下所示： $(".image").off("contextMenu").on('contextMenu', function() {});这意味着，首先，绑定所有图像的上下文菜单事件，然后将上下文菜单事件绑定到所有图像。您应该在加载新图像时运行此代码。

有意义吗？

更新：我认为这正是您想要的：

$(document).contextmenu({
    delegate: ".image",
    //menu: "myMenu",
    menu: [
        {title: "Cut <kbd>Ctrl+X</kbd>", cmd: "cut", uiIcon: "ui-icon-scissors"},
        {title: "Copy <kbd>Ctrl+C</kbd>", cmd: "copy", uiIcon: "ui-icon-copy"}
    ],
    select: function(event, ui) {
        switch(ui.cmd){
        case "copy":
            alert('copy');
            break
        case "cut":
            alert('cut');
            break
        }
    }
});