发表新帖
发表新帖

jquery assign onclick for li from a link

后端 未结
关注
5 999
长情又很酷
长情又很酷 2020-12-14 13:30

I have a list of items

相关标签:
5条回答
  • 逝去的感伤
    2020-12-14 13:52

    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());
        }
    });
});
    0 讨论(0)
  • 逝去的感伤
    2020-12-14 13:53

    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'); }
    });
});
    0 讨论(0)
  • 忘掉有多难
    2020-12-14 13:59

    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.

    0 讨论(0)
  • 我在风中等你
    2020-12-14 14:06 
    $('.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.

    0 讨论(0)
  • 庸人自扰
    2020-12-14 14:08

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

    0 讨论(0)
 看不清?
提交回复
热议问题