替換元素後未觸發的分揀和整理事件

中間列在元素上方拖動時應更改寬度。它一直工作，直到我點擊代替中間欄的html的替換按鈕。然後事件停止被觸發。據我所知.on()應該可以處理這種情況，還是我錯了？替換元素後未觸發的分揀和整理事件

這是一個簡單的演示這表明了問題：https://jsfiddle.net/shuetvyj/3/

HTML：

<div class="members-column"> 
    <div class="sort"> 1 </div> 
    <div class="sort"> 1 </div> 
</div> 
<div id="groupB" class="members-column"> 

</div> 
<div class="members-column"> 
    <div class="sort"> 2 </div> 
</div> 
<a href="" id="replace">replace groupB</a>

的Javascript：

$(".members-column").sortable({ 
    items: ".sort", 
    connectWith: ".members-column"  
}); 
$("#groupB").on("sortover", function() { 
    console.log('overB'); 
    $('#groupB').css('min-width','80px'); 
}); 
$("#groupB").on("sortout", function() { 
    console.log('outB'); 
    $('#groupB').css('min-width',''); 
}); 
$("#replace").on("click", function(e) { 
    e.preventDefault(); 
    $("#groupB").replaceWith('<div id="groupB" class="members-column"></div>'); 
});

來源

2017-07-26 chriemmy

當你更換HTML，聽衆你已經連接到舊的HTML不會重新附加到新的HTML。

因此，您的處理程序將不再被調用。爲了解決這個問題，只需將偵聽器附加到新的html，當你替換它。

（jQuery的解決了這個與live而不是on了一段時間，這將自動附加DOM更改後聽衆）http://api.jquery.com/live/

但live()，因爲jQuery的1.7已被棄用，在取出1.9

另外，刪除該列可能也會中斷sortable的行爲（因爲它不會存儲選擇器，而是選擇器在第一次調用時的結果，因此會保留對從DOM中刪除的div的引用。）

總之;一旦你有sortable聽着它，只需清除或更換其內容

來源

2017-07-26 07:15:08

好的，我試過了：https：//jsfiddle.net/shuetvyj/4/。它仍然不起作用。 – chriemmy

，這可能與刪除列也會破壞可排序的行爲有關。從外觀上看，你將不得不重新初始化整個排序結構。在旁註中，爲什麼不清除中間列的內容？ –

是的，你是對的。在這個例子中，我只替換了一個元素，但在實際應用中，很多其他的東西都被替換了，我寧願不重寫處理它的代碼。那謝謝啦！ – chriemmy

不刪除列DIV而不是使用replaceWith使用.html如下

$("#replace").on("click", function(e) { 
    e.preventDefault(); 
    $("#groupB").html(""); 
});

https://jsfiddle.net/shuetvyj/5/

使用replaceWith

$('body').on('sortover', '.members-column', function() { 
    $('#groupB').css('min-width','80px'); 
    }); 
    $('body').on('sortout', '.members-column', function() { 
    $('#groupB').css('min-width',''); 
    }); 
$("#replace").on("click", function(e) { 
    e.preventDefault(); 
    $("#groupB").replaceWith('<div id="groupB" class="members-column"></div>'); 
    $(".members-column").sortable({ items: ".sort",connectWith: ".members-column" });; 
});

https://jsfiddle.net/shuetvyj/8/

來源

2017-07-26 07:21:00 Vineesh

這是有效的，因爲它不會刪除div，而是清除它的內容，使聽衆和任何引用'sortable'都完好無損。 –

是的，我從答案中刪除了它。我只注意到了這一點 – Vineesh

替換元素後未觸發的分揀和整理事件

回答

相關問題