jQuery sortable序列化無法識別動態添加的內容

Question

我試圖在可排序更新時通過ajax重新排序列表，但是在頁面加載時已初始化可排序之后，通過ajax將新項目添加到此列表后，它無法通過“序列化”功能識別新項目。 它的確使我可以將其拖動，好像它正在工作，但是通過我的更新函數發送的代碼缺少新元素。

 //Sort categories $('#categories-list').find('tbody').sortable({ connectWith: 'tbody', opacity: 0.6, cursor: 'move', forcePlaceholderSize: true, update: function(e) { var serialized = $('#categories-list tbody').sortable('serialize'); console.log(serialized); $.post('admin/ereg_forms/set_category_position', serialized, function(data) { if (data.status == 'error') { alert(data.message); } }); } }); //Add category submit $("#add-category-submit").click(function(e) { e.preventDefault(); $(".errors-block").html(''); $('#add-category-submit').hide(); $.ajax({ url: $("#add-category-form").attr('action'), type: 'POST', data: $('#add-category-form').serialize(), dataType: 'json', success: function(data) { $('#add-category-submit').show(); //Check if server side validation passed if (data.status == 'error') { //Show error on popup dialog $("#add-category-form .errors-block").html(data.message); alert('Sorry, the information that was sent is invalid. Please review the errors at the top of the form and try again.'); } else { var category_data = data.data; var tableRow = '<tr class="category-row-' + category_data.id + '"><td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">&#8597;</span>' + '</td><td>' + category_data.title + '</td><td></tr>' $(tableRow).appendTo('#categories-list tbody'); resetForm($('#add-category-form')); //Close popup window $('#add-category').dialog('close'); $("<div title='Success!'>Category has been saved.</div>").dialog({ modal: true, width: 'auto' }); } }, error: function(data) { alert('An unknown error has occurred, please try again.'); $('#add-category-submit').show(); } }); }); 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <table class="data" id="categories-list"> <thead> <tr> <th>&nbsp;</th> <th>Title</th> </tr> </thead> <tbody> <tr id="category-row-19"> <td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">↕</span></td> <td class="category-row-title">test1</td> </tr> <tr id="category-row-20"> <td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">↕</span></td> <td class="category-row-title">test</td> </tr> </tbody> </table> 

我到處都在尋找解決方案，但沒有找到有效的解決方案。 我嘗試使用帶有可排序功能的“刷新”功能，也嘗試在ajax調用的成功功能內部初始化可排序功能以添加新類別，但它也無法正常工作。

當我console.log（serialized）時，它在數組中僅具有最初加載的元素。

Answer 1

IDK發生了什么，但是這個假的添加有效，也許您可​​以效仿？ 注意我清理了一些語法問題，並使用了ajax promise方法來更好地組織它。

我建議您更新jQuery版本，並在較新的版本中通過錯誤修復更新一些更好的東西。

 //Sort categories $('#categories-list').find('tbody').sortable({ connectWith: 'tbody', opacity: 0.6, cursor: 'move', forcePlaceholderSize: true, update: function(e) { var serialized = $('#categories-list tbody').sortable('serialize'); console.log(serialized); // $.post('admin/ereg_forms/set_category_position', serialized, function(data) { // if (data.status == 'error') { // alert(data.message); // } // }); } }); $('#addmorefool').on('click', AddMore); function AddMore() { let tbody = $('#categories-list').find('tbody'); let rowscount = tbody.find('tr').length; let newRow = '<tr id="category-row-' + rowscount + '"><td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">↕</span></td><td class="category-row-title">test' + rowscount + '</td></tr>'; tbody.append(newRow); } AddMore(); //Add category submit $("#add-category-sumbit").on('click', function(e) { //console.log("howdy"); e.preventDefault(); var myform = $("#add-category-form"); var errorBlock = myform.find(".errors-block"); errorBlock.html(''); errorBlock.dialog({ modal: true, width: 'auto', autoOpen: false }); var catSub = $('#add-category-submit'); catSub.hide(); var myjax = $.ajax({ url: myform.attr('action'), type: 'POST', data: myform.serialize(), dataType: 'json' }) .done(function(data) { catSub.show(); //Check if server side validation passed var category_data = data.data; var tableRow = $('<tr class="category-row-' + category_data.id + '"><td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">&#8597;</span>' + '</td><td>' + category_data.title + '</td><td></tr>'); let tbody = $('#categories-list').find('tbody'); tbody.append(tableRow); resetForm(myform); //Close popup window (out cause have none) //('#add-category').dialog('close'); $("<div title='Success!'>Category has been saved.</div>").dialog({ modal: true, width: 'auto' }); }).fail(function(data) { //Show error on popup dialog errorBlock.html('<span>Sorry, the information that was sent is invalid. Please review the errors at the top of the form and try again.</span>' + data.message); errorBlock.dialog("open"); //catSub.show(); (out cause not in code) }); }); 

 tr td { border: 1px solid lime; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <div id="add-category-form" action="metoo">I am an empty form, so what <div class="errors-block">me error aggain? no way</div> </div> <table class="data" id="categories-list"> <thead> <tr> <th>&nbsp;</th> <th>Title</th> </tr> </thead> <tbody> <tr id="category-row-19"> <td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">↕</span></td> <td class="category-row-title">test1</td> </tr> <tr id="category-row-20"> <td><span class="double-arrow-unicode" style="font-size:18px; cursor:pointer;">↕</span></td> <td class="category-row-title">test</td> </tr> </tbody> </table> <button id="addmorefool" type="button">Add More</button> <div class="errors-block">me error</div> <button type="button" id="add-category-sumbit">add category</button> 

Answer 2

我最終解決了這個問題，問題出在添加類別函數中，我在應用類別屬性而不是對類別行-{id}使用“ id”屬性。