jquery为链接中的li分配onclick

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

我希望能够将链接的onclick分配给li的onclick

My attempt so far is one click behind (as I am assigning the script to the onclick rather than executing the script)

到目前为止我的尝试是一次点击(因为我将脚本分配给onclick而不是执行脚本)

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

Thanks in advance Tim

提前谢谢蒂姆

5 个解决方案

#1

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)

建立在@Thomas Stock的回答下面的代码阻止了点击链接而不是li的双重执行。 (从这里得到它jQuery网站)

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

#2

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.

你这样做,所以整个li块是一个可点击的链接,而不仅仅是一个元素?如果是这样,您可以使用CSS轻松完成此操作。

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.

通过这样做,您只需要将click事件附加到标记,如果您真的需要在用户点击它时执行一些javascript。

#3

Loop over the li using each instead of using click:

使用每个循环遍历li而不是使用click:

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

#4

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

马里奥的解决方案也将有效。我将采取孩子的onclick事件并在实际点击时执行它。

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

Mario的解决方案将把onclick事件绑定到文件加载的li上。选择最适合你的。

#5

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.

您最好的选择可能是选择一种特定的元素类型 - 也许是尺寸更大的元素 - 并将点击处理程序分配给那些。如果将onclick设置为A标记和LI(通过任何方式),则调用可能会发生两次,除非您专门阻止在命名函数中出现此类事件冒泡。

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

您是否希望在两种元素类型上执行相同的操作,而不是仅仅一种? (如果它只是“只是一种预防措施”,那么最好解决问题,而不是用更多的脚本来铺平它们。)

#1