爲什麼我不能上下移動「追加數據」？

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(); 
});