jQuery在无序列表中的列表项上绑定点击事件无效。

Question

jQuery在无序列表中的列表项上绑定点击事件无效。

7

我有一个无序列表，它的id为#sortable1，当ul id="sortable2"中的li元素被点击时，我希望出现一个onclick事件，并弹出被点击的li元素的id。但是在这个无序列表中，还有一个class="emptyMessage"的元素是不能被点击的。

我现在不知道如何继续下去了。

到目前为止，我的代码如下：

<ul id="sortable1" class="connectedSortable ui-sortable">
<li class="ui-state-default" id="1">Name1</li>
<li class="ui-state-default" id="2">Name2</li>
<li class="ui-state-default" id="3">Name3</li>
<li class="ui-state-default" id="4">Name4</li>
<li class="ui-state-default" id="5">Name5</li>
<li style="display: list-item;" class="emptyMessage">No more contacts available</li></ul>

我的 JQUERY 代码

$("#sortable1 li").click(function() {
          alert('Clicked list.'+$(this).value);
         });

- Elitmiar

5个回答

3

$("#sortable1 > li.ui-state-default").click(function() {
    alert("Clicked list " + $(this).attr("id"));
});

- Jimmy Chandra

0

你的 JavaScript 中有语法错误。应该是这样的：

$("#sortable1 li").click(function() {
    alert("Clicked list." + $(this).value);
});

另外，我认为你的意思是$(this).html()而不是$(this).value - <li>没有值（在jQuery对象上应该是.val()）。

这里有一个可用版本。

- Skilldrick

@jAndy - 是的，我刚刚注意到了 :) - Skilldrick

它仍然不排除.emptyMessage。 - jAndy

0

可能是选择器写错了？这是我的代码（运行得很好）：

<html>
    <head>
        <title>MooExample</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#sortable1 > li").click(function() {
                    alert($(this).html());
                });
            });
        </script>
    </head>

    <body>
        <ul id="sortable1" class="connectedSortable ui-sortable">
            <li class="ui-state-default" id="1">Name1</li>
            <li class="ui-state-default" id="2">Name2</li>
            <li class="ui-state-default" id="3">Name3</li>
            <li class="ui-state-default" id="4">Name4</li>
            <li class="ui-state-default" id="5">Name5</li>
        </ul>
    </body>
</html>

更新：抱歉，我认为<li>元素没有val()属性 =)

- shybovycha

0

使用此选项可以更具体地选择

$(document).ready(function () {
    $("ul#sortable1 li").click(function() {
    alert("Clicked list." + $(this).text());
});
});

- akshaync

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jAndy · Accepted Answer

这应该可以解决问题：

$("#sortable1 li").not('.emptyMessage').click(function() {
       alert('Clicked list. ' + this.id);
});

演示: http://www.jsfiddle.net/gztRq/2/