Clone parent div of selected event.target
Question
When I right click on link, I want to fetch all the code of its parent div and it should be cloned after this div.
I have tried some code but it is not working, please see my code below. I would also like to remove the selected parent div .
Below is my code:
// 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 answers
solution1
1 ACCPTED 2018-09-06 13:50:52
In your code example, in the event handler $(".custom-menu li").click= function() { ... } event.target points to the li element and getting its parent gives you ul element which gets cloned and inserted inside ul giving a nested list ie a context menu inside context menu.
To resolve, take a reference of the clicked element when right-clicked along with other properties and refer inside this event handler to make a clone. See the code for understanding.
// 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Border outline for parent div of selected event.target
Only target parent with event.target?
Event.target refer to the child, not the parent
Detecting click on inner div with event.target
Can you target an elements parent element using event.target?
How can I get outer div target with event.target?
HostListener and event.target
is event.target deprecated?
Event.target alternatives
event.target in AJAX
Related Tags