ansaurus

Question

jquery assign onclick for li from a link

Answer 1

+1 A:

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

Mario Menger 2009-05-26 14:04:06

Answer 2

A:

$('.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.

Thomas Stock 2009-05-26 14:06:15

Hi ThomasI quite like this implementation as it fits in with some other things I am doing. But, when I click on the original link the javascript now fires twice, is there anyway to prevent this using your method?

Tim Jarvis 2009-05-26 14:35:06

Hmmm, good question. I know it's possible because I did something similar before. Hold on, I'll check the jquery documentation

Thomas Stock 2009-05-26 14:45:37

do you have any idea which click fires first? (add an alert() in the li.click to find out)

Thomas Stock 2009-05-26 14:50:58

The link fires first.I did have to modify the code to get it working -> eval(launch.attr('onclick') + '; onclick();')It seems to be also getting the function name as well eg (function onclick(alert('course4');) when using the eval function any ideas. Sorry for all the questions your help is really appreciated

Tim Jarvis 2009-05-26 15:00:01

Could you replace eval(launch.attr('onclick')) from my original answer with alert(launch.attr('onclick')) and tell me what it shows in the alert exactly?

Thomas Stock 2009-05-26 15:20:13

IE7 }.

Tim Jarvis 2009-05-26 15:34:01

Answer 3

A:

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.)

Collin Allen 2009-05-27 03:17:47

Answer 4

+1 A:

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

TheVillageIdiot 2009-05-27 04:06:16

ahhhh the magic - thank you

Tim Jarvis 2009-05-27 07:53:11

Answer 5

+1 A:

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.

Gromer 2009-05-27 04:19:34

ansaurus

tags:

views:

answers:

jquery assign onclick for li from a link

related questions