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>

为什么上下文菜单只能工作＆＃34;旧的真实内容＆＃34;只要？如何追加＆＃34; new-apeneded-data＆＃34; ？

Answer 1

如果Jquery Contextmenu插件在函数定义中使用了相同的类，则无需重新初始化新添加的元素。在您的情况下，下面的代码将通过class =“image”处理所有元素。查找更多详情here

$(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

这是因为当您编写$(".image").contextMenu()时，表示您将新事件绑定到页面上的现有 .image。当您添加/加载更多元素时，您应该将$(".image_new").contextMenu()应用于它们。

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

有意义吗？

<强>更新这就是你想要的，我想：

$(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
        }
    }
});

Answer 3

如果你使用函数

，

应该有效

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

所有课程=＆＃34;图像＆＃34;添加到正文中的元素应该受到事件的影响，即使它们是在页面完全加载后添加的。

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

3 个答案: