克隆所选 event.target 的父 div
[英]Clone parent div of selected event.target
问题描述
当我右键单击链接时，我想获取其父 div 的所有代码，并且应该在此 div 之后克隆它。
我尝试了一些代码但它不起作用，请参阅下面的代码。 我还想删除选定的父div 。
下面是我的代码：
// when we're about to show the context menu, show our own instead $(document).on("contextmenu", function(event) { // Avoid the real one if this is the link if ($(event.target).hasClass("sim-row-edit")) { console.log("right click identified"); // add border $(event.target).parent().addClass("selected"); event.preventDefault(); clicked_link = $(event.target).text(); clicked_url = $(event.target).attr("href"); clicked_id = $(event.target).attr("id"); //$(event.target).text("ttt"); //alert(clicked_link); // Show contextmenu $(".custom-menu").show(100). css({ top: event.pageY + "px", left: event.pageX + "px" }); } }); // hide our context menu when the document is clicked $(document).on("mouseup", function() { $(".custom-menu").hide(100); $(".selected").removeClass("selected"); }); $(".custom-menu li").click(function() { //alert("hii2"); // This is the triggered action name switch ($(this).attr("data-action")) { // A case for each action. Should personalize to your actions case "first": // console.log("first"); console.log("-----"); console.log(clicked_link); console.log(clicked_url); console.log(clicked_id); //trying to clone the div using below code but it is not working. thisDiv = $(event.target).parent(); $(thisDiv).clone().insertAfter(thisDiv); //console.log($(this).parent().text()); break; case "second": console.log("second"); break; case "third": console.log("third"); break; } });
.custom-menu { display: none; z-index: 1000; position: absolute; background-color: #fff; border: 1px solid #ddd; overflow: hidden; width: 120px; white-space: nowrap; font-family: sans-serif; -webkit-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); } .custom-menu li { padding: 5px 10px; } .custom-menu li:hover { background-color: #4679BD; cursor: pointer; } .selected { border: 1px solid red; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <title>title</title> </head> <body> <div> Lorem.. <a href="http://goo.com" id="id-goo" class="sim-row-edit" data-type="link">right click on me and click clone, but its not working</a> </div> <div class="sim-row-edit"> <a href="http://voo.com" id="id-voo" data-type="link">voo</a> </div> <ul class='custom-menu'> <li data-action = "first">Clone</li> <li data-action = "second">Second thing</li> <li data-action = "third">Third thing</li> </ul> <script type="text/javascript" src="script.js"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2018-09-06 13:50:52
在您的代码示例中，在事件处理程序$(".custom-menu li").click= function() { ... } event.target指向li元素并获取parent元素为您提供ul元素，该元素被克隆和插入ul给出嵌套列表，即上下文菜单内的上下文菜单。
要解决此问题，请在右键单击时引用被单击的元素以及其他属性，并在此事件处理程序中引用以进行克隆。 看代码了解。
// when we're about to show the context menu, show our own instead $(document).ready(function() { console.log('Document ready'); }); $(document).on("contextmenu", function(event) { // Avoid the real one if this is the link if ($(event.target).hasClass("sim-row-edit")) { console.log("right click identified"); // add border $(event.target).parent().addClass("selected"); event.preventDefault(); target_element = $(event.target); clicked_link = $(event.target).text(); clicked_url = $(event.target).attr("href"); clicked_id = $(event.target).attr("id"); //$(event.target).text("ttt"); //alert(clicked_link); // Show contextmenu $(".custom-menu").show(100). css({ top: event.pageY + "px", left: event.pageX + "px" }); } }); // hide our context menu when the document is clicked $(document).on("mouseup", function() { $(".custom-menu").hide(100); $(".selected").removeClass("selected"); }); $(".custom-menu li").click(function() { //alert("hii2"); // This is the triggered action name switch ($(this).attr("data-action")) { // A case for each action. Should personalize to your actions case "first": // console.log("first"); console.log("-----"); console.log(clicked_link); console.log(clicked_url); console.log(clicked_id); console.log(target_element); //trying to clone the div using below code but it is not working. console.log(event.target); thisDiv = target_element.parent(); thisDiv.clone().insertAfter(thisDiv); //console.log($(this).parent().text()); break; case "second": console.log("second"); break; case "third": console.log("third"); break; } });
.custom-menu { display: none; z-index: 1000; position: absolute; background-color: #fff; border: 1px solid #ddd; overflow: hidden; width: 120px; white-space: nowrap; font-family: sans-serif; -webkit-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); box-shadow: 2px 2px 7px 0px rgba(50, 50, 50, 0.5); } .custom-menu li { padding: 5px 10px; } .custom-menu li:hover { background-color: #4679BD; cursor: pointer; } .selected { border: 1px solid red; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <title>title</title> </head> <body> <div> Lorem.. <a href="http://goo.com" id="id-goo" class="sim-row-edit" data-type="link">right click on me and click clone, but its not working</a> </div> <div> <a href="http://voo.com" id="id-voo" data-type="link">voo</a> </div> <ul class='custom-menu'> <li data-action="first">Clone</li> <li data-action="second">Second thing</li> <li data-action="third">Third thing</li> </ul> <script type="text/javascript" src="script.js"></script> </body> </html>
所选event.target的父div的边框轮廓
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.