为什么我不能上下移动“追加数据”？

Question

$(document).ready(function() { 
 
    var $selected = $(); 
 
    var $itemLv1 = $("#cList [class^=lv]"); 
 
    $itemLv1.on('click', function (e) { 
 
     $selected = $(this); 
 
     var x = $(this).toggleClass('clicked'); 
 
     $("[class^=lv]").not(x).removeClass("clicked child").addClass("child"); 
 
     // x.siblings().removeClass('clicked'); 
 
     e.stopPropagation(); 
 
    }); 
 
    $("#moveUp").on('click', function() { 
 
     $selected.insertBefore($selected.prev("[class^=lv]")); 
 
    }); 
 
    $("#moveDown").on('click', function() { 
 
     $selected.insertAfter($selected.next("[class^=lv]")); 
 
    }); 
 
    var cList = document.getElementById("cList"); 
 
    var divLv1 = document.createElement("div"); 
 
    divLv1.className = 'lv1'; 
 
    var content = document.createTextNode("This is a test"); 
 
    divLv1.appendChild(content); 
 
    cList.appendChild(divLv1); 
 
});

.clicked{ 
 
    color: red !important; 
 
} 
 
.child{ 
 
    color:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<button type="button" id="moveUp">Up </button>/
 
<button type="button" id="moveDown">Down</button> 
 
<div id="cList"> 
 
    <div class="lv1">AAAAAA</div> 
 
    <div class="lv1">BBBBBB</div> 
 
    <div class="lv1">CCCCCC</div> 
 
    <div class="lv1">DDDDDD</div> 
 
</div>

我可以向上或向下移动源数据。 但是，当我使用ajax获取数据并在其下添加同一类的数据（“This is test”）时。

我不能移动它。

我错过了什么吗？

Answer 1

由于元素动态创建的，您将需要使用on()事件处理程序是这样的：

$(document).on('click', '#cList [class^=lv]', function (e) { 
    $selected = $(this); 
    var x = $(this).toggleClass('clicked'); 
    $("[class^=lv]").not(x).removeClass("clicked child").addClass("child"); 
    // x.siblings().removeClass('clicked'); 
    e.stopPropagation(); 
});