Question

我有一个项目列表

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

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

到目前为止，我的尝试只需点击一下（因为我将脚本分配给onclick而不是执行脚本）

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

提前致谢添

Answer 1

在@Thomas Stock's answer上构建以下代码可防止在点击链接而不是li时双重执行。（从here 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());
        }
    });
});

Answer 2

你这样做是因为整个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;
}

编辑：

通过这样做，如果你真的需要在用户点击它时做一些javascript，你只需要将click事件附加到a标签。

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

是否有特殊原因要求在两种元素类型上执行相同的操作，而不只是一种？（如果它只是“只是一种预防措施”，那么最好解决问题，而不是用更多的脚本来铺平它们。）

jquery为链接中的li分配onclick

5 个答案: