Develop Reference

Not able to find data-id when selecting element

Apologies in advance I feel as if this is a very simple solution and I am in the middle of a severe brain fart. I am simply trying to grab the data-id of an item I am clicking using ES6 syntax but no matter which way I run it I keep getting undefined.
HTML
<ul>
<li class="list-item" data-id="item-1">Click me</li>
<li class="list-item" data-id="item-2">Click me</li>
<li class="list-item" data-id="item-3">Click me</li>
</ul>
JS
let $el = $('ul');
class List {
constructor($el) {
this.$el = $el;
this.$listItem = $el.find('li');
this.attachHandlers();
}
attachHandlers() {
this.$listItem.on('click', () => {
var data = $(this).attr('data-id');
console.log(data);
});
}
}
const _init = () => {
if ($el.length) {
$el.each((i, v) => {
new List($(v));
});
}
};
_init();
Ive simplified the code down as much as possible, anybody see what I am doing wrong here?

The problem is in your attachHandlers method. Since you are using an arrow function, this refers to the class and not the element that was clicked.
Change the arrow function to a regular function.

In addition to Josan's answer, if you want to continue using the arrow function, use it like this:
class List {
constructor($el) {
this.$el = $el;
this.attachHandlers();
}
attachHandlers() {
this.$el.on('click', 'li', (e) => {
var data = $(e.currentTarget).attr('data-id');
console.log(data);
});
}
}
For more discussion, refer to this thread.

Simpler and easier by just using JQuery:
$(".list-item").on('click', function() {
console.log($(this).data('id'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="list-item" data-id="item-1">Click me</li>
<li class="list-item" data-id="item-2">Click me</li>
<li class="list-item" data-id="item-3">Click me</li>
</ul>

Navigation menu dropdown top level doesn't work

I have a dropdown menu with top level and two sub levels. The thing is that the sub levels work just fine, I can click on them and it takes me to the page I selected. The problem is with the top level, when I hover over it it displays the submenus but when I click on it it doesn't take me to the page.
var menu_Sub = $(".menu-has-sub");
var menu_Sub_Li;
$(".mobile-device .menu-has-sub").find(".fa:first").removeClass("fa-angle-right").addClass("fa-angle-down");
menu_Sub.click(function() {
if ($(".header").hasClass("mobile-device")) {
menu_Sub_Li = $(this).parent("li:first");
if (menu_Sub_Li.hasClass("menu-opened")) {
menu_Sub_Li.find(".sub-dropdown:first").slideUp(function() {
menu_Sub_Li.removeClass("menu-opened");
menu_Sub_Li.find(".menu-has-sub").find(".fa:first").removeClass("fa-angle-up").addClass("fa-angle-down");
});
} else {
$(this).find(".fa:first").removeClass("fa-angle-down").addClass("fa-angle-up");
menu_Sub_Li.addClass("menu-opened");
menu_Sub_Li.find(".sub-dropdown:first").slideDown();
}
return false;
} else {
return false;
}
});
menu_Sub_Li = menu_Sub.parent("li");
menu_Sub_Li.hover(function() {
if (!($(".header").hasClass("mobile-device"))) {
$(this).find(".sub-dropdown:first").stop(true, true).fadeIn("fast");
}
}, function() {
if (!($(".header").hasClass("mobile-device"))) {
$(this).find(".sub-dropdown:first").stop(true, true).delay(100).fadeOut("fast");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-menu">
<ul class="nav-menu-inner">
<li>
Home
</li>
<li>
<a class="menu-has-sub" href="about-us">About us <i class="fa fa-angle-down"></i></a>
<!-- Dropdown -->
<ul class="sub-dropdown dropdown">
<li>
<a class="menu-has-sub" href="clients-case-studies">Clients and Case Studies</a>
</li>
</ul>
<!-- End Dropdown -->
Any help would be appreciated. Thank you.

The problem arises in your return false call at the end of your first if statement:
menu_Sub.click(function () {
if ($(".header").hasClass("mobile-device")) {
menu_Sub_Li = $(this).parent("li:first");
if (menu_Sub_Li.hasClass("menu-opened")) {
...
}
else {
return false; // this prevents the default click action from occuring
}
});
What you are saying here is basically, if I click on the .menu-has-sub link and it doesn't have a .mobile-device class, I want it to return false.
That essentially means event.preventDefault() - read this SO answer for a great explanation event.preventDefault() vs. return false
But that seems to be your problem, be careful when preventing the default action on links, if you want them to go somewhere.
Here is a fiddle with the line commented out.

How to handle onclick event in js [duplicate]

This question already has answers here:
Javascript onclick
(4 answers)
Closed 7 years ago.
I'm new in javascript and I'm trying to hide or show a submenu with the onclick event.
Here's the code:
javascript:
<script type="text/javascript">
bool shown = false;
document.getElementById("test").onclick = SubMenuDisplay();
function SubMenuDisplay()
{
alert("Hello World!");
if(!show)
{
$('subm').show();
shown = true;
}
else
{
$('subm').hide();
shown = false;
}
}
</script>
and html:
<li id="test">Account
<ul id="subm">
<li>Login</li>
<li>Sign up</li>
</ul>
</li>
but my onclick event doesn't work at all.
Is someone can help?

Here is what I believe you are trying to pull off:
Account
<ul id="subm">
<li>Login
</li>
<li>Sign up
</li>
</ul>
var shown = false;
$("#subm").hide();
function SubMenuDisplay() {
alert("Hello World!");
if (!shown) {
$('#subm').show();
shown = true;
} else {
$('#subm').hide();
shown = false;
}
}
Fiddle: http://jsfiddle.net/ryanpcmcquen/wyrogc77/
JavaScript is dynamically typed, so you do not need to declare types, as you did with bool shown = false;. This can be replaced with var shown = false;. JavaScript will figure out that this is a boolean.
Beyond that your code just needed a little massaging. You were assigning the id="test" to the li element, when you should just assign it to the a, and style the a like an li, with something like:
#test {
list-style-type: bullet;
list-style-position: inside;
display: list-item;
}

Just remove the ():
document.getElementById("test").onclick = SubMenuDisplay;
You are assigning the event with the function not the return value of the function. And make sure you are doing it after declaring the function, else it might throw an undefined error.
function SubMenuDisplay()
{
alert("Hello World!");
if(!show)
{
$('subm').show();
shown = true;
}
else
{
$('subm').hide();
shown = false;
}
}
document.getElementById("test").onclick = SubMenuDisplay;

Since you decided to use jQuery, then use it (I mean, go to jquery.com and read the doc):
$('#test > a').click(function (e) {
e.preventDefault();
$(this).next().toggle();
});
.subm {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="test">
Account
<ul class="subm">
<li>Login</li>
<li>Sign up</li>
</ul>
</li>

jQuery prevent scroll

I have a click event but it jumps to the top of the screen.
I have tried return false and e.preventdefault. I think it maybe something else. Has anyone come across something like this? Thanks
$("#savedCompares").click(function () {
$('#searchContent').hide();
$('#compareContent').show('fade');
$(this).addClass("selected");
$("#searchListings").removeClass("selected");
return false;
});
<ul>
<li id="searchListings" class="resultCategory selected">Searched: Motors</li>
<li id="savedCompares" class="resultCategory">Saved compares (<div id="comparesAdded">0</div>)</li>
</ul>

Creating a Mac OS X title bar-style menu with HTML and Javascript

I am working on a web site. The type of menu that I want to create is one where you click on something in the menu, and a submenu pops up. But then you can also hover over any other menu item and another submenu will come up, hiding the first one you clicked. You can click anywhere to close the submenu.
I hope that was clear enough, and would appreciate any help you can give.

Here's my very, very simple, cheap, brief, ugly, lazy, father-disappointing version. It uses jQuery, and it probably doesn't actually look anything like what you wanted. But it accomplishes (I think) the one important thing: "locking" the sub-menu open until either another one is opened, or the user clicks somewhere else on the page.
The HTML looks like this...
<ul>
<li>
<a class="author" href="#">Menu Item 1</a>
<ul class="books">
<li><a class="book" href="#">Sub-Menu Item 1</a></li>
<li><a class="book" href="#">Sub-Menu Item 2</a></li>
</ul>
</li>
<!-- ... -->
</ul>
...and here's the JavaScript:
(function ($) {
var $current,
closeSubMenu = function () {
if ($current) {
$current.slideUp();
}
},
openSubMenu = function (e) {
var $books = $(this).next();
e.preventDefault();
e.stopPropagation();
if (!$current || $current[0] !== $books[0]) {
closeSubMenu();
$current = $books;
$books.slideDown();
}
};
$(document).click(function (e) {
var $target = $(e.target);
if ($target.hasClass('author')) {
openSubMenu.call(e.target, e);
} else if ($target.hasClass('book')) {
e.preventDefault();
} else {
closeSubMenu();
$current = null;
}
});
$('.books').slideUp();
}(jQuery));
If nothing else, it should help give you some ideas for how you do decide to do it.