jquery - DOM 更新后使用可拖动

Question

当前的 DOM 是这样的：

<div id="image_list">

</div>

事件发生后，这将更新为：

<div id="image_list">
   <img class="dragable-img" src="image1.png" />
   <img class="dragable-img" src="image2.png" />
   <img class="dragable-img" src="image3.png" />
   <img class="dragable-img" src="image4.png" />
 </div>

现在页面中有一个应该处理拖动的js

$('.dragable-img').draggable({
        revert: true,
            handle: 'img',
            containment: "#content-body", 
            scroll: false
 }).disableSelection();

显然，它在更新 DOM 之前可以工作，而在更新 DOM 之后就不能工作。那么，我在这里缺少什么？

Answer 1

尝试使用ajaxComplete()函数 - 它会在页面上的每个 ajax 调用后触发

$('#image_list').ajaxComplete(function(){
    $('.dragable-img',this).draggable({
        revert: true,
        handle: 'img',
        containment: "#content-body", 
        scroll: false
    }).disableSelection();
)};

更好的方法是在 $.ajax 成功函数中再次调用 draggable

$.ajax({
    url:yoururl
    success: function(){
       //do what you need.. update/add to your dom 
       //then call draggable on your elements
       $('.dragable-img').draggable({
           revert: true,
           handle: 'img',
           containment: "#content-body", 
           scroll: false
       }).disableSelection();
    }
});

Answer 2

检查这是否有效..

$('#image_list').on('draggable', '.dragable-img' , function(){
   return {
            revert: true,
            handle: 'img',
            containment: "#content-body", 
            scroll: false
   }

}).disableSelection();

如果这不起作用...draggable()在元素插入DOM之后尝试使用。