Question

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

我可以向上或向下移动原始数据。但是，当我使用ajax获取数据并附加数据（＆＃34;这是测试＆＃34;）时，它下面有相同的类。

我无法移动它。

我错过了什么吗？

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

为什么我无法上下移动＆＃34;追加数据＆＃34;？

1 个答案: