jquery - DOM更新后使用draggable

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 success 函数中再次调用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();
    }
});