CODEWITHSUNDEEP
jquery
Tim Jarvis
Tim Jarvis

Reputation: 677

jquery assign onclick for li from a link

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

Upvotes: 5

Views: 41112

Answers (5)

Gromer
Gromer

Reputation: 9931

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.

Upvotes: 6

TheVillageIdiot
TheVillageIdiot

Reputation: 40497

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());
        }
    });
});

Upvotes: 7

Collin Allen
Collin Allen

Reputation: 4585

Your best bet is probably to pick one specific element type -- perhaps the one with bigger dimensions -- and assign the click handler to those only. If the onclick is set to both the A tag and the LI (through whatever means), the call may happen twice, unless you specifically prevent such event bubbling in your named function.

Is there a particular reason you want the same action to happen on both element types, instead of just one? (If it's something along the lines of "just a precaution," it's probably best to work out the issues instead of paving over them with more scripting.)

Upvotes: 0

Thomas Stock
Thomas Stock

Reputation: 11256

$('.list li').click(function() {
    var launch = $('a.launch', this);
    if (launch.size() > 0) { eval(launch.attr('onclick')) }
});

Mario's solution will also work. Mine will take the child 's onclick event and execute it, on the actual click.

Mario's solution will bind the 's onclick event to the li's on document load. Pick what suits you best.

Upvotes: 1

Mario Menger
Mario Menger

Reputation: 5902

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'); }
    });
});

Upvotes: 1

Related Questions