JQuery UI ContextMenu не будет подключаться к диалогу - PullRequest
Новая
       31

JQuery UI ContextMenu не будет подключаться к диалогу

0 голосов
/ 25 февраля 2019

Я использую контекстное меню пользовательского интерфейса jquery ... простое в использовании ... за исключением случаев, когда я пытаюсь прикрепить их к диалогу.Тогда ничего не происходит.

Ниже приведена небольшая программа для иллюстрации проблемы.У меня есть кнопка, которая выскакивает диалоговое окно jquery UI, и диалоговое окно содержит таблицу.Я делегирую контекстное меню классу.Но когда я щелкаю правой кнопкой мыши, все, что я получаю, это системное меню.

Любая помощь, с благодарностью полученная!

Приветствия Джефф 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AJP Policy Database</title>
<link rel="stylesheet" href="font-awesome.css"> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/humanity/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui-contextmenu.min.js"></script>
</head>
<body>
	<button id="b1">Dialog</button>
	<div id="d1" class="hasmenu"></div>
	<div id="t1">
	<table>
	<thead>
	<th>HHHH</th>
	<th>IIII</th>
	<th>jjj</th>
	</thead>
	<tbody>
	<tr> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr>
	<tr> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr>
	<tr> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr>
	</tbody>
	</table>
	</div>
</body>
<script>
$( function() {
	$("#b1").click(function() { showDialog(); });
});
function showDialog() {
	var htmls=`<table id="dialogtable">
	<thead>
	<th>HHHH</th>
	<th>IIII</th>
	<th>jjj</th>
	</thead>
	<tbody>
	<tr> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr>
	<tr> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr>
	<tr> <td>bbb</td> <td>ccc</td> <td>ddd</td> </tr>
	</tbody>
	</table>
	`;
	$("#d1").dialog({title: "Comments", autoOpen: false}); 
	$("#d1").dialog("open").html(htmls);
	setContextMenu();
}
function setContextMenu() {
	$("#d1").contextmenu({
		delegate: ".hasmenu",
		menu: [
		   {title: "T1", cmd: "t1"},
		   {title: "T2", cmd: "t1"}
   		],
		select: function(event, ui) {
			alert(ui.cmd);
		}
	});
}
</script>
</html>

1 Ответ

0 голосов
/ 27 февраля 2019

В ходе моего тестирования я обнаружил, что что-то перехватывает событие щелчка правой кнопкой мыши или контекстного меню в диалоговом окне.

Пример Fiddle: https://jsfiddle.net/Twisty/eahgrb5j/

$(function() {

  function initContextMenu(tObj) {
    tObj.contextmenu({
      delegate: ".hasmenu",
      menu: [{
        title: "Edit",
        cmd: "edit"
      }, {
        title: "Delete",
        cmd: "delete"
      }],
      select: function(event, ui) {
        alert(ui.cmd);
      }
    });
  }

  function showDiag(dObj, tStr, cHtm) {
    if (tStr == undefined) {
      tStr = "Comment"
    }
    if (cHtm == undefined) {
      cHtm = '<p>Right-Click an item below</p><table id="dialogtable"><thead><th class="hasmenu">HHHH</th><th class="hasmenu">IIII</th><th class="hasmenu">jjj</th></thead><tbody><tr><td class="hasmenu">bbb</td><td class="hasmenu">ccc</td><td class="hasmenu">ddd</td></tr><tr><td class="hasmenu">bbb</td><td class="hasmenu">ccc</td><td class="hasmenu">ddd</td></tr><tr><td class="hasmenu">bbb</td><td class="hasmenu">ccc</td><td class="hasmenu">ddd</td></tr></tbody></table>';
    }
    dObj.html(cHtm);
    dObj.dialog({
      title: tStr,
      autoOpen: false
    });
    dObj.dialog("open");
    initContextMenu($("table", dObj));
  }

  $("#b1").click(function() {
    showDiag($("#d1"), "Special Comment");
  });
});
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/humanity/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ui-contextmenu/1.18.1/jquery.ui-contextmenu.min.js"></script>

<button id="b1">Dialog</button>
<div id="d1"></div>
<div id="t1">
  <table>
    <thead>
      <th>HHHH</th>
      <th>IIII</th>
      <th>jjj</th>
    </thead>
    <tbody>
      <tr>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>
      </tr>
      <tr>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>
      </tr>
      <tr>
        <td>bbb</td>
        <td>ccc</td>
        <td>ddd</td>
      </tr>
    </tbody>
  </table>
</div>

Вы можете видеть, что область таблицы подавляет щелчок правой кнопкой мыши.Итак, что-то происходит, но я не могу определить, что в это время.Посмотрите на это позже.

...