Menu
I have a list of items
<ul class="list">
<li>
<a href="#Course1" class="launch" onclick="alert('event 1')">event 1</a>
</li>
<li class="alt">
<a href="#Course2" class="launch" onclick="alert('event 2')">event 2</a>
</li>
<li>
<a href="#Course3" class="launch" onclick="alert('event 3')">event 3</a>
</li>
<li class="alt">
<a href="#Course4" class="launch" onclick="alert('event 4')">event 4</a>
</li>
</ul>
I want to be able to assign the onclick of the link to the onclick of the li aswell
My attempt so far is one click behind (as I am assigning the script to the onclick rather than executing the script)
$('.list li').click(function() {
var launch = $('a.launch', this);
if (launch.size() > 0) { this.onclick = launch.attr('onclick'); }
});
Thanks in advance Tim
803
This is a type of JavaScript link - the onclick attribute defines a JavaScript action when the 'onclick' event for the link is triggered (i.e. when a user clicks the link) - and there is a URL present itself in the onclick attribute.
Using onclick Event: The onclick event attribute works when the user click on the button. When mouse clicked on the button then the button acts like a link and redirect page into the given location. Using button tag inside <a> tag: This method create a button inside anchor tag.
To set an onClick listener on a div element in React:Set the onClick prop on the div. The function you pass to the prop will get called every time the div is clicked. You can access the div as event.
building on @Thomas Stock's answer the following code prevents double execution on clicking on link instead of li. (got it from here jQuery site)
$(document).ready(function() {
$('ul.list li').click(function(e) {
var $target = $(e.target);
if(!$target.is("li")) //magic happens here!!
{
return;
}
var launch = $('a.launch', this);
if (launch.size() > 0)
{
eval(launch[0].onclick());
}
});
});
Are you doing this so the whole li block is a clickable link instead of just the a element? If so, you could easily do this with CSS instead.
HTML:
<html>
<head>
<title>Testing Block Elements</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<ul id="menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</body>
</html>
CSS:
#menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
/* Added to show the whole li element will be a clickable link. */
width: 250px;
border: 1px solid #000000;
}
#menu li a {
display: block;
}
EDIT:
And by doing this, you only need to attach the click event to the a tag if you really need to do some javascript when the user clicks on it.
20
Loop over the li using each instead of using click:
$(document).ready(function(){
$('.list li').each(function() {
var launch = $('a.launch', this);
if (launch.size() > 0) { this.onclick = launch.attr('onclick'); }
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
