We Keep Coding

Javascript event handler on list item li parent node

I'm new to javascript and I wanted to create an event onclick to list items. The problem is that I want to create an event to the li tag, but it keeps firing when I click the descendent ul's.
Here goes part of my code:
<li id="1660761" class="HTMLFirstLevel HTMLHorizontalArrowDown">
<ul id="ul1223945" class="HTMLItem">
<li id="1490659" class="HTMLRemainingLevels"></li>
<li id="483463" class="HTMLRemainingLevels"></li>
<li id="80919" class="HTMLRemainingLevels"></li>
<li id="1280053" class="HTMLRemainingLevels"></li>
<li id="1799353" class="HTMLRemainingLevels"></li>
<li id="1882209" class="HTMLRemainingLevels"></li>
<li id="462917" class="HTMLRemainingLevels"></li>
</ul>
</li>
<li id= ......>
<ul....>
<ul...>
</li>
and my javascript:
var parentNode = document.getElementById('1660761');
parentNode.addEventListener("click",function(e) {
alert('Hi There');
});
}
Now I only want it to fire on the item li with the id 1660761, and not the items inside the list.
The list is an imported component and I can't create events inside the html, that's why I'm accessing it outside with javascript.
Now here's how I've done it by scaning the div by tag name and then adding a "click" event listener if the content equals the tag inner html that I was searching for.
I leave the rest of the html that it's important to this aproach:
<div id="MainMenu" class="HTMLMenuContainer HTMLMenuHorizontal">
<ul id="ul1351387" class="HTMLMenu">
<li id="1660761" class="HTMLFirstLevel HTMLHorizontalArrowDown">
<a href="#">
<span>Back Office</span>
</a>
<ul id="ul1172716" class="HTMLItem">
<li id="1490659" class="HTMLRemainingLevels">
<a href="#">
<span>
Some submenu Here
</span>
</a>
</li>
.....
and the code:
var divs = document.getElementsByClassName('HTMLMenuHorizontal');
var span = divs[0].getElementsByTagName('span');
//I iterate till 19 cause its more than all the spans in the page.
for(var i=0; i<20; i++) {
var sp= span[i];
if(sp.innerHTML==('Back Office')){
sp.addEventListener("click",function back(){
//do something here like
alert('Back Office');
});
}
}
This works fine and it doesn't fire on the itens inside.
This works because in my case the itens doesn't change the content, only the visibility.
I do the same for all the other itens that have descendents.
Thank you all.

Below is my jQuery code for this problem:
$(function(){
$("li.1660761").live("click", onListItemLink);
}
function onListItemLink(){
alert('Hello World!');
}
This one is for JavaScript:
var parentNode = document.getElementById('1660761');
parentNode.onclick = onListItemLink;
function onListItemLink(){
alert('Hello World!');
}

take a look at this page to undersand correctly:
capture event
and what's function(e-->??)
I hope it helps.

$('#1660761').unbind('click').click(function(e) {
if (e.target !== this) return;
alert('Hey There!');
});
Try This code : http://jsfiddle.net/sd5LZ/

How to find the nearest parent element attribute value using Jquery

I am facing a problem on getting the nearest parent element attribute value using Jquery. Can anyone help me on this. My element structure is as below,
<ul class="Someclass">
<li><span id=3 class="heading"></span>
<ul>
<li>
<ul> <li><span ><button onclick= "redirect()"></button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
<script type="text/javascript">
function redirect() {
alert(....)
}
</script>
In the above code when i click that element having onclick event i want to get the value as 3 in alert() which is in the element having the class heading. The above code is in for loop so it will have more code like this in a same page.

Give this Try
function redirect(elem) {
alert($(elem).closest('.Someclass > li').children('span').attr('id'))
}
Change Markup to this:
<li><span><button onclick= "redirect(this)"></button></span</li>
this will reffer to the current object in DOM
By wrapping elem in $(elem) will convert it to jQuery object then you can traverse to the closest and find span
You can also filter that span with .children('span:first')
Fiddle Example

With your current code, pass the clicked element reference to the function like
<button onclick= "redirect(this)">asdf</button>
then
function redirect(el) {
alert($(el).closest('.Someclass > li').children('span').attr('id'))
}
Demo: Fiddle
Bu a more recommended way will be is to use jQuery event handlers like
<button class="redirect">asdf</button>
then
jQuery(function($){
$('.Someclass .redirect').click(function(){
alert($(this).closest('.Someclass > li').children('span').attr('id'))
})
})
Demo: Fiddle

This should do it.
alert($(this).closest('.heading').attr('id'));

$(".someclass li").click(function(){
$(this).closet('.heading').attr('id');
})

could you pass it on as a parameter to your redirect function? You'd somehow hold that value in a variable in your loop.

I got a solution if you can change the id and class to parent li
Working Demo
More about parent selector
Jquery
function redirect(elem) {
var myid = $(elem).parents(".heading").attr("id");
alert(myid);
}
HTML
<ul class="Someclass">
<li id="3" class="heading">
<ul>
<li>
<ul> <li><span ><button onclick="redirect(this)" id="haha">Go</button></span</li>
<ul>
</li>
</ul>
</li>
<ul>

pass html object to function after it is clicked?

I have a small list I made in behind code and I i have an onclick thats fired when a button is hit (used tag for buttons). I would like to know how to pass the object to my onclick function so I can toggle its class. So something likes this:
<script "text/javascript">
function navButtonClick() {
$(this).toggleClass("is-open");
alert("Yay!");
}
</script>
A person on another forum said that code should work but nothing seems to happen..
Here's what my behind code writes into the html:
<div id="sidebar">
<nav>
<h2>Sites</h2>
<ul id="navMenu">
<li class="toggle">Stanislaus
<ul class="subnav">
<li>Bob</li>
</ul>
</li>
</ul>

I'm assuming by the toggleClass that you're using JQuery, so you can just use .on('click') instead of trying to make it into a function call, but it'd be easier if you assign the toggle class to the a element instead of the li.
http://jsfiddle.net/22eYu/
$('a.toggle').on('click', function(){
$(this).toggleClass("is-open");
alert("yay");
});

Simply pass this to onclick and then use it in the function.
DEMO: jsfiddle
JS:
<script "text/javascript">
function navButtonClick(clicked) {
$(clicked).toggleClass("is-open");
alert("Yay!");
}
</script>
HTML:
<ul id="navMenu">
<li class="toggle">Stanislaus
<ul class="subnav">
<li>Bob
</li>
</ul>
</li>
</ul>
CSS:
.is-open{
background-color: red;
}
However, It appears you just need the following CSS:
CSS: In here just put your CSS class .is-open
a:visited {
background-color: red;
}

You may have scoping problems. Does this work?
<script "text/javascript">
window.navButtonClick = function(el) {
$(el).toggleClass("is-open");
alert("Yay!");
}
</script>
...
Stanislaus
...

Cannot add click events to list items

This is my first foray into using Javascript with HTML. I'm trying to add click events to the list items in an ordered list, but something about the way I'm doing it isn't working. Can somebody shed some light on this for me?
I create a function in my head that should delegate all click events on the list items of a specified list to a given function, and in that given function I try to raise a simple alert with the text of the list item. Eventually I want to do more, but I'm just trying to get the simple click events to work first.
<html>
<head>
<script type="text/javascript">
// Attach an event handler to the 'topfriends' list to handle click events.
function attachEventHandlerToList() {
document.getElementById("#top4list").delegate("li", "click", function(clickEvent) {
alert(this.innerHTML());
});
}
</script>
</head>
<body>
<div id="topfriends">
<h3>Top 4 Most Friendable Friends</h3>
<ol id="top4list" onload="attachEventHandlerToList()">
<li>Brady</li>
<li>Graham</li>
<li>Josh</li>
<li>Sean</li>
</ol>
</div>
</body>

Let's do something like this
<ul id="parent-list">
<li id="a">Item A</li>
<li id="b">Item B</li>
<li id="c">Item C</li>
<li id="d">Item D</li>
<li id="e">Item E</li>
<li id="f">Item F</li>
</ul>
Now write the javascript for this
<script type="text/javascript">
// locate your element and add the Click Event Listener
document.getElementById("parent-list").addEventListener("click",function(e) {
// e.target is our targetted element.
// try doing console.log(e.target.nodeName), it will result LI
if(e.target && e.target.nodeName == "LI") {
console.log(e.target.id + " was clicked");
}
});
</script>
Please refer to this write-up on Javascript Event Delegates
http://davidwalsh.name/event-delegate
Also, below link is the fiddle that I created
http://jsfiddle.net/REtHT/
hope this helps !

delegate() is a deprecated jQuery method, and no such method exists in plain JS.
To attach an event handler in JS you'd use addEventListener, and for older versions of IE you'll need attachEvent as well, that's why it's a little tricky with cross browser event handlers.
onclick, onmouseenter etc. will work in all browsers, but it's consider a better practice to use addEventListener / attachEvent.
Also, you have to run the script after the elements are added to the DOM, otherwise they are not available. The usual way is to insert the script after the elements, or use a DOM ready event handler.
<html>
<head>
<title>test</title>
</head>
<body>
<div id="topfriends">
<h3>Top 4 Most Friendable Friends</h3>
<ol id="top4list">
<li>Brady</li>
<li>Graham</li>
<li>Josh</li>
<li>Sean</li>
</ol>
</div>
<script type="text/javascript">
var lis = document.getElementById("top4list").getElementsByTagName('li');
for (var i=0; i<lis.length; i++) {
lis[i].addEventListener('click', doStuff, false);
}
function doStuff() {
alert( this.innerHTML );
}
</script>
</body>
FIDDLE

Try this. It will work with child Node and Parent Node also.
var visitorList = document.getElementById("visitor");
visitorList.addEventListener("click", function (e) {
var visitorId;
if (e.target && e.target.nodeName == "LI") {
visitorId = e.target.id;
console.log(e.target.id);
}
if(e.target && e.target.nodeName == "H1") {
visitorId = e.srcElement.parentElement.id;
console.log(e.srcElement.parentElement.id);
}
//console.log(visitorId);
});
<ul id="visitor">
<li id="a" style="background: #CCCCCC; padding: 10px;"><h1 style="background: #437ba9;">Visitor A</h1></li>
<li id="b"><h1>Visitor B</h1></li>
<li id="c"><h1>Visitor C</h1></li>
<li id="d"><h1>Visitor D</h1></li>
<li id="e"><h1>Visitor E</h1></li>
<li id="f"><h1>Visitor F</h1></li>
</ul>

You can also do it by using querySelectorAll
<ul class="stuffList">
<li>Stuff 1</li>
<li>Stuff 2</li>
<li>Stuff 3</li>
<li>Stuff 4</li>
<li>Stuff 5</li>
</ul>
<script type="text/javascript">
document.querySelectorAll('ul.stuffList li').forEach((item) => {
item.addEventListener('click', (e) => {
console.log(e.target)
})
});
</script>

Hello why not doing it easier by replacing onLoad directy by onClick
<script type="text/javascript">
function olClicked(){
alert(this.innerHTML());
}
</script>
<ol id="top4list" onClick="olClicked()">

jQuery hover function not working correctly

So I'm just trying to do a simple jquery effect but am having issues with the second part of the .hover function. Here's the code:
<div id="toprightboxes">
<ul>
<li><div id="login"><img src="img/login.png"/></div></li>
<li>info</li>
</ul>
</div>
<script>
$("#login").hover(
function () {
$(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
},
function () {
$(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
}
);
</script>
The first part of the hover works and the highlight image shows up but when I move off of the image nothing happens.

Ehm, its the same IMAGE you replace back...
Secondly why use jQuery for such a hover effect? You can easily do this with a:hover {} and pure CSS.

I think you have a typo — your event for mouseleave is the same as the one for mouseenter. Is this what you meant?
<div id="toprightboxes">
<ul>
<li><div id="login"><img src="img/login.png"/></div></li>
<li>info</li>
</ul>
</div>
<script>
$("#login").hover(
function () {
$(this).replaceWith('<div id="login"><img src="img/loginhighlight.png"/></div>');
},
function () {
$(this).replaceWith('<div id="login"><img src="img/login.png"/></div>');
}
);
</script>
If all you're doing is changing the image, though, you might want to consider using CSS instead.