移动列表项时jQuery不起作用

时间:2014-11-14 13:58:08

标签: jquery html

我点击它时尝试移动列表项,然后我按照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>

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

2 个答案:

答案 0 :(得分:3)

<head>

中运行此功能时
$('.simple li').click(function() {

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

你可以:

  1. 将该脚本块移动到正文的末尾
  2. 将其包裹在$(document).ready(...)中,以便在实际存在各种元素之后运行
  3. 请使用on处理程序,例如$(document).on('click', '.simple li', function() ...)
  4. &#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>
      
    <!-- set the handler *after* creating the elements -->
    
    <script type="text/javascript"> 
    $('.simple li').click(function() {
        var $this = $(this);
        $this.insertBefore($this.siblings('.simple li:nth-child(1)'));
    });
    </script>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:1)

你错过了$(文件).ready()。这样:

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