I am trying to append a custom element on click on parent menu items to child menu items. When I click to parent item the code adds the custom Element. But when I click on an empty space of children item (CUSTOM ELEMENT) after custom element added, it keeps appending the elements.
$("li:has(ul)").click(function(e) {
e.preventDefault();
$("ul", this).animate({
width: "40%"
}, 200);
var ele = '<h4 class="m-level-2" style="color: #d4dce5; text-transform: uppercase;font-family: Rajdhani,sans-serif;font-weight: 700;font-size: 1.875rem;margin-bottom: 0.5rem;">Altron<h4><h2 class="h4" style="color: #52c3df;text-transform: uppercase;font-family: Rajdhani,sans-serif;font-weight: 700;font-size: 3.75rem;margin-bottom: 1rem;"></h2><a href="#" class="nav-menu-back" style="color: #fff;font-size: 1rem;font-family: Montserrat,sans-serif;text-transform: none;">Go Back</a><hr style="background-color: #d4dce5; margin: 1.875rem 0;opacity: 1;height: 1px;" class="menu-hr">';
$("ul", this).prepend(ele);
let text = $(this).find("a").first().text();
//console.log(text);
$("ul", this).find("h2").text(text);
});
Clicking a child element will trigger a click handler on the parent. You can check if the click originated from your target element by checking e.currentTarget. Try this:
$("li:has(ul)").click(function(e) {
e.preventDefault();
if(e.target !== e.currentTarget){
return;
}
$("ul", this).animate({
width: "40%"
}, 200);
var ele = '<h4 class="m-level-2" style="color: #d4dce5; text-transform: uppercase;font-family: Rajdhani,sans-serif;font-weight: 700;font-size: 1.875rem;margin-bottom: 0.5rem;">Altron<h4><h2 class="h4" style="color: #52c3df;text-transform: uppercase;font-family: Rajdhani,sans-serif;font-weight: 700;font-size: 3.75rem;margin-bottom: 1rem;"></h2><a href="#" class="nav-menu-back" style="color: #fff;font-size: 1rem;font-family: Montserrat,sans-serif;text-transform: none;">Go Back</a><hr style="background-color: #d4dce5; margin: 1.875rem 0;opacity: 1;height: 1px;" class="menu-hr">';
$("ul", this).prepend(ele);
let text = $(this).find("a").first().text();
//console.log(text);
$("ul", this).find("h2").text(text);
});
This answer explains currentTarget vs target: What is the exact difference between currentTarget property and target property in JavaScript