0

我有一个动态创建的<ul>样式菜单，我想找出<li>点击了哪个。

经过多次尝试，我无法让它识别出哪个<li>被点击了。我已经尝试将“点击”附加到每个<li>和<ul>. 我还参加了 Lynda.com 上的两门 Javascript 和一门 jQuery 课程。

我最好的结果是使用 Javascript 获得一个空的警报框。因此，在经历了令人沮丧的三天之后，我再次来到这里寻求帮助。

<script>$(".qmli").on('click', function() { 
        alert($(this).text());
    });
</script>


<ul id="qm0" class="qmmc">
    <li><a class="qm-startopen qmparent" href="javascript:void(0)">Top menu</a>
        <ul>
            <li><a class="qmparent" href="javascript:void(0)">Plants</a>
                <ul>
                    <li>class='qmli" <a href="javascript:void(0)">Flowers</a></li>
                    <li>class='qmli" <a href="javascript:void(0)">Trees</a></li>
                </ul>
            </li>
            <li><a class="qmparent" href="javascript:void(0)">Animals</a>
                <ul>
                    <li>class='qmli" <a href="javascript:void(0)">Lions</a></li>
                    <li>class='qmli" <a href="javascript:void(0)">Tigers</a></li>
                </ul>
            </li>
    <li>class='qmli" <a href="#">Overview</a></li>
    <li>class='qmli" <a href="javascript:void(0)">Publicity</a></li>
        </ul>
    </li>
    <li class="qmclear">&nbsp;</li>
</ul>
4

4 回答 4

1

1）摆脱href="javascript:void(0)"。这是不好的做法。改为使用href="#"。

2) 怎么了<li>class='qmli"？应该是<li class="qmli">。

3）你想要获取<a>元素，你还应该把你的代码放在一个 DOMReady 函数中。像这样：

$(document).ready(function() {
    $(".qmli a").click(function(e) { 
        alert($(this).text());
        e.preventDefault(); //Essentially the equivalent of javascript:void(0); 
    });
});

为了获得最佳效果，应该放在<head>.

希望有帮助。

于 2012-05-02T01:44:04.090 回答
1

您粘贴的标记绝对无效。我很确定任何一个

<li>class='qmli" <a href="javascript:void(0)">Lions</a></li>

应该是这样的

<li class="qmli"><a href="javascript:void(0)">Lions</a></li>

然后你的代码就可以正常工作了。

于 2012-05-02T01:44:14.227 回答
0

问题

修复类并删除javascript:void(0)'s 是很好的第一步，但是您还需要记住将 jquery 包装在 $(document).ready() 函数中。（阅读我附在底部的参考资料）

我已经修复了你的 html 和你的 jquery，并通过修复你的标记和代码中的所有问题，我已经产生了你想要达到的结果。

编码

html:

<ul id="qm0" class="qmmc">
    <li><a class="qm-startopen qmparent" href="#">Top menu</a>
        <ul>
            <li><a class="qmparent" href="#">Plants</a>
                <ul>
                    <li class="qmli"><a href="#">Flowers</a></li>
                    <li class="qmli"><a href="#">Trees</a></li>
                </ul>
            </li>
            <li><a class="qmparent" href="#">Animals</a>
                <ul>
                    <li class="qmli"><a href="#">Lions</a></li>
                    <li class="qmli"> <a href="#">Tigers</a></li>
                </ul>
            </li>
    <li class="qmli"><a href="#">Overview</a></li>
    <li class="qmli"> <a href="#">Publicity</a></li>
        </ul>
    </li>
    <li class="qmclear">&nbsp;</li>
</ul>​

jQuery：

$(document).ready(function() {

    $(".qmli").click(function() {

        alert($(this).text())
        preventDefault()
    });

});​

参考

于 2012-05-02T01:57:43.450 回答
0

两个错误

1.<li class='qmli'>不是<li>class='qmli'

2.您将脚本放在标记之上，因此您必须将其包装在 ready() 处理程序中

<script>
$(document).ready(){
$(".qmli").on('click', function() { 
        alert($(this).text());
    });
    });

</script>
于 2012-05-02T01:57:56.497 回答