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

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>

为什么上下文菜单仅适用于“旧真实内容”？在附加“new-apeneded-data”之后我怎样才能让它工作？

Answer 1

如果新添加的元素在函数定义中使用了相同的类，则 Jquery 上下文菜单插件无需重新初始化。在您的情况下，以下代码将适用于 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
        }
    });
});