jquery从链接为li分配onclick_Jquery

jquery从链接为li分配onclick

jquery

jquery从链接为li分配onclick,jquery,Jquery,我有一份物品清单 <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

我有一份物品清单

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

提前谢谢

Tim

使用每个而不是单击在li上循环：

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

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

Mario的解决方案将把的onclick事件绑定到加载文档时的li事件。选择最适合您的元素。

您的最佳选择可能是选择一种特定的元素类型——可能是维度更大的元素类型——并将单击处理程序仅分配给这些元素。如果onclick同时设置为A标记和LI（通过任何方式），则调用可能会发生两次，除非您特别防止命名函数中出现此类冒泡事件

您希望在两种元素类型上发生相同的操作，而不是仅在一种元素类型上发生相同的操作，这有什么特殊原因吗？（如果这只是一个“预防措施”，那么最好是解决问题，而不是用更多的脚本来覆盖问题。）

基于以下代码，可以防止在单击链接而不是li时重复执行。（从jQuery网站获得）

你这样做是为了让整个li块成为一个可点击的链接，而不仅仅是a元素吗？如果是这样的话，您可以用CSS轻松地实现这一点

HTML:

编辑：

通过这样做，如果用户单击时确实需要执行一些javascript，则只需将click事件附加到a标记。

嗨，Thomas，我非常喜欢这个实现，因为它与我正在做的其他事情相适应。但是，当我点击javascript现在触发两次的原始链接时，是否使用您的方法来防止这种情况发生？嗯，好问题。我知道这是可能的，因为我以前也做过类似的事情。等一下，我查一下jquery文档。你知道先单击哪个按钮吗？（在li.click中添加警报（））首先触发链接。我确实需要修改代码来让它工作->eval（launch.attr（'onclick'）+'；onclick（）；'））它似乎也得到了函数名，例如（function onclick（alert（'course4'）；）在使用eval函数时有什么想法吗？对于所有问题，非常感谢你的帮助。你能替换eval（launch.attr（'onclick'））从我最初的回答（launch.attr（'onclick'））中，告诉我它在警报中到底显示了什么？最好的回答是imho。最初的海报希望能够点击LI。这里不需要javascript，显示：block发挥了神奇的作用。

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

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

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

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

#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;
}