Question

我点击它时尝试移动列表项，然后我按照accepted answer的代码进行操作。它确实适用于JSfiddle，请参阅here。

但是当我将此代码移动到html文件中时，它不起作用。整个文件的内容如下所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test the jQuery cycle</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript"> 
$('.simple li').click(function() {
    var $this = $(this);
    $this.insertBefore($this.siblings('.simple li:nth-child(1)'));
});
</script>
<style type="text/css">
.for-list li{
    float:left; width:60px;
    }
.for-list{
    list-style-type:none;
    }
</style>
</head>

<body>
<ul class="simple for-list">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

</body>
</html>

我找不到这段代码有什么问题？

Answer 1

在<head>：

中运行此功能时

$('.simple li').click(function() {

尚未存在此类项目（事实上，根本不存在任何元素）。因此处理程序附加到 nothing 。它不会影响以后创建的.simple li项目。

你可以：

将该脚本块移动到正文的末尾
将其包裹在$(document).ready(...)中，以便在实际存在各种元素之后运行

请使用on处理程序，例如$(document).on('click', '.simple li', function() ...)

＆＃13;
＆＃13;
.for-list li{ float:left; width:60px; } .for-list{ list-style-type:none; }
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="simple for-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul>  <script type="text/javascript"> $('.simple li').click(function() { var $this = $(this); $this.insertBefore($this.siblings('.simple li:nth-child(1)')); }); </script>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你错过了$（文件）.ready（）。这样：

$(document).ready(function(){
    $('.simple li').click(function() {
        var $this = $(this);
        $this.insertBefore($this.siblings('.simple li:nth-child(1)'));
    });
});

移动列表项时jQuery不起作用

2 个答案: