Javascript jquery onclick hide根本不起作用，我哪里出错了

我有一个无序列表，其列表项有表。这些列表项可以拖动和排序。我正在努力在单击时隐藏列表元素。我有一个jquery代码，但它似乎不起作用。请帮我解决这个问题。html代码是：

<ul class="sortable">
            <li class="list" id="first">1</li>
            <li class="list" id="second">2</li>
            <li class="list" id="third">3</li>
            <li class="list" id="fourth">4</li>
            <li class="list" id="fifth">5</li>
            <li class="list" id="sixth">6</li>
            <li class="list" id="seventh">7</li>
            <li class="list" id="eighth">8</li>
            <li class="list" id="ninth">9</li>
            <li class="list" id="tenth">10</li>

        </ul>

1
2
3
4
5
6
7
8
9
10

使用的jquery是：

<script type="text/javascript">
        $(function(){
            $( ".sortable" ).sortable();
            $( ".sortable" ).disableSelection();
        });

        //ONCLICK CLOSE

        $(".list").click(function() {
            var tblId=$(this).attr("id");
            alert(tblId);
            $("#"+tblId).hide();
        });
</script>

$（函数（）{
$（“.sortable”）.sortable（）；
$（“.sortable”）.disableSelection（）；
});
//点击关闭
$（“.list”）。单击（函数（）{
var tblId=$（this.attr（“id”）；
警报（tblId）；
$（“#”+tblId）.hide（）；
});

有一些是我用过的，我不确定这些链接是否会成为功能上的障碍。页面中的链接包括：

<!--script src="js/jQuery.min.js" type="text/javascript"></script-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!--script src="js/jquery-ui.js" type="text/javascript"></script-->
<link rel="stylesheet" type="text/css" href="css/jquery.contextmenu.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/menu.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
<script src="js/jquery.contextmenu.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

---

您需要将代码包装到

文档中。准备就绪

 $(document).ready(function(){
 $(".list").click(function() {
        var tblId=$(this).attr("id");
        alert(tblId);
        $("#"+tblId).hide();
    });
});

---

您需要在DOM就绪处理程序中封装click函数

$(function () {
    $(".sortable").sortable();
    $(".sortable").disableSelection();

    $(".list").click(function () {
        var tblId = $(this).attr("id");
        alert(tblId);
        $("#" + tblId).hide();
    });
});

当前，只有代码的第一块在

$（function（）{…}）内

此外，只需包含jQuery一次，即可删除：

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

正如其他答案所建议的，将其移动到dom就绪处理程序中

jQuery(function ($) {
    $(".sortable").sortable();
    $(".sortable").disableSelection();

    //move it inside the dom ready handler
    //also there is no need to fetch the id of the element, you can pass the dom element reference directly to jQuery
    $(".list").click(function () {
        $(this).hide();
    });
});

jQuery(function ($) {
    $(".sortable").sortable();
    $(".sortable").disableSelection();

    //move it inside the dom ready handler
    //also there is no need to fetch the id of the element, you can pass the dom element reference directly to jQuery
    $(".list").click(function () {
        $(this).hide();
    });
});