上下文菜單不適用於新內容

我有上下文菜單，它按照我的意圖工作，但是一旦我使用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>

爲什麼上下文菜單中唯一的工作只有「真正的內容」？如何在添加「新猿人數據」後使其工作？

來源

2015-04-12 Madian Malfi

請看看下面的鏈接，可能會幫助你... http：//stackoverflow.com/questions/12938805/enabling-jquery-contextmenu-item-on-ajax-request – R4nc1d

這是因爲當你編寫$(".image").contextMenu()，這意味着，你綁定新事件現有的.image在頁面上。當你打包/加載更多元素時，你應該對其應用$(".image_new").contextMenu()。

One解決方案的是事件偵聽器連接到您的圖片，像這樣： $(".image").off("contextMenu").on('contextMenu', function() {}); 這意味着，第一，你綁定過的所有圖像contextmenu事件，然後綁定contextmenu事件的所有圖像。當新圖像加載時，您可以運行此代碼。

它有道理嗎？

UPDATE： 這正是你想要什麼，我想：

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

來源

2015-04-12 21:17:19

我做過但我無法使它工作，我怎麼能把這個「上下文菜單（{菜單：'myMenu' }，功能（」內部（） –

@MadianMalfi，更好的結賬阿里Sheikhpour的答案，它比我好得多。 –

我試過但不工作！..這就是爲什麼我在這裏的第一個地方:( –

文本菜單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 
     } 
    }); 
});

來源

2015-04-12 21:20:42

他們有同樣的班級，但不工作，這是t他的問題：/ –

如何在成功的Ajax調用之後再次調用該函數？ –

如果在函數中使用應該工作：

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

所有類=「圖片」添加到body元素應該由事件的影響，即使它們是後添加頁面已完全加載。

來源

2015-04-12 21:26:45 Gooze

我試了一下..沒有爲我工作！ –

上下文菜單不適用於新內容

回答

相關問題