jquery sortable不适用于动态添加的项目
Posted
技术标签:
【中文标题】jquery sortable不适用于动态添加的项目【英文标题】:jquery sortable not working on dynamically added items 【发布时间】:2019-03-09 23:09:11 【问题描述】:我正在尝试从 jQuery UI 获取 .sortable
工作,但它仅适用于我的第一个项目,当我动态添加新项目时,它停止工作。
我发现了这个:http://api.jqueryui.com/sortable/#method-refresh,它应该刷新所有内容并识别新项目,但是当我使用它时,我得到了错误:
Uncaught Error: cannot call methods on sortable prior to initialization; attempted to call method 'refresh'
我能做什么?
我的代码:
// html template for new fields
const template = `<div class="row sortwrap">
<div class="col-md-8">
<input type="text" name="category[]" placeholder="" class="form-control name_list catinput" />
<i class="mdi mdi-sort dragndrop"></i>
<div class="questionlist">
<div class="row">
<div class="col-md-8">
<input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" />
</div>
<div class="col-md-4">
<button class="btn btn-success questionbutton">Extra vraag</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<button id="addcategory" class="btn btn-danger btn_remove">X</button>
</div>
</div>`;
const vraagTemplate = `<div class="row">
<div class="col-md-8">
<input type="text" name="question[]" class="form-control name_list questioninput" />
</div>
<div class="col-md-4">
<button class="btn btn-danger btn_remove">X</button>
</div>
</div>`;
$('.sortwrap').sortable();
// Count numbers and change accordingly when field is deleted
function updatePlaceholders()
// Sortable code
$('.sortwrap').sortable("refresh");
$('#dynamic_field input[name^=cat]').each(function(i)
$(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
);
$('#dynamic_field .sortwrap').each(function(i)
$(this).attr("id", i + 1);
);
$('#dynamic_field .questionlist').each(function()
$(this).find('input[name^=qu]').each(function(i)
$(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
);
);
// Append category template
$('#addcategory').click(function()
$('#dynamic_field').append($(template));
updatePlaceholders();
);
// Append question template
$('#dynamic_field').on('click', '.questionbutton', function()
$ql = $(this).closest('.questionlist');
$ql.append($(vraagTemplate));
updatePlaceholders();
);
// Delete
$('#dynamic_field').on('click', '.btn_remove', function()
$(this).closest('.row').remove();
updatePlaceholders();
);
如果我在我的函数中删除表示刷新的行并且在我的代码中只有一个.sortable
,那么我可以拖动所有项目,甚至是新项目,但没有任何东西掉落。所以我可以拖动但不能排序/放下。
【问题讨论】:
【参考方案1】:我认为这是您附加排序的位置。我在这里使用了一个包装器。
请注意,由于我附加了它,我关闭了刷新,因为它似乎不需要那个附加点。
// HTML template for new fields
const template = '<div class="row sortwrap"> <div class="col-md-8"> <input type="text" name="category[]" placeholder="" class="form-control name_list catinput" /> <i class="mdi mdi-sort dragndrop"></i> <div class="questionlist"> <div class="row"> <div class="col-md-8"> <input type="text" name="question[]" placeholder="1. Voeg een vraag toe" class="form-control name_list questioninput" /> </div> <div class="col-md-4"> <button class="btn btn-success questionbutton">Extra vraag</button> </div> </div> </div> </div> <div class="col-md-4"> <button id="addcategory" class="btn btn-danger btn_remove">X</button> </div> </div>';
const vraagTemplate = '<div class="row"> <div class="col-md-8"> <input type="text" name="question[]" class="form-control name_list questioninput" /> </div> <div class="col-md-4"> <button class="btn btn-danger btn_remove">X</button> </div> </div>';
// Count numbers and change accordingly when field is deleted
function updatePlaceholders()
// Sortable code
// $('#dynamic_field').sortable( "refresh" );
let df = $('#dynamic_field');
df.find('input[name^=cat]').each(function(i)
$(this).attr("placeholder", i + 1 + ". Voeg een categorie toe");
);
df.find('.sortwrap').each(function(i)
$(this).attr("id", i + 1);
);
df.find('.questionlist').each(function()
$(this).find('input[name^=qu]').each(function(i)
$(this).attr("placeholder", i + 1 + ". Voeg een vraag toe");
);
);
// Append question template
$('#dynamic_field').on('click', '.questionbutton', function()
let $ql = $(this).closest('.questionlist');
$ql.append($(vraagTemplate));
updatePlaceholders();
);
// Delete
$('#dynamic_field').on('click', '.btn_remove', function()
$(this).closest('.row').remove();
updatePlaceholders();
);
$('#addcategory').on('click', function()
let t = $(template)
$('#dynamic_field').append(t);
updatePlaceholders();
);
$(function()
$('#addcategory').trigger('click');
$('#dynamic_field').sortable();
);
.sortwrapborder: solid green 1px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div>
<button id="addcategory">add</button>
</div>
<div id="dynamic_field"></div>
【讨论】:
这很好用,除非我拖动一个元素时它变得不可见。为什么会这样? 在此示例中没有,因此必须是本地 CSS 或出于某种原因放入“隐藏”中。查看此内容以获取一些想法:***.com/questions/17425543/…【参考方案2】:如上所述,这可以正常工作 这看起来很有希望:
http://api.jqueryui.com/sortable/#method-refresh
这似乎意味着您可以将一个项目添加到可排序中,然后调用
$('#mysortable').sortable('refresh')
识别它。
var counter = 1;
function appendThing()
$("<li id='Text" + counter + "' class='ui-state-default'>Text" + counter + "</li>").appendTo($("#mySortable"));
$("#mySortable").sortable( refresh: mySortable )
counter++;
;
请看一下
https://jsfiddle.net/6ztrdg9n/
【讨论】:
在您的示例中,添加的项目不可重新排列。以上是关于jquery sortable不适用于动态添加的项目的主要内容,如果未能解决你的问题,请参考以下文章
jQuery 使用带有动态添加元素的 Sortable(实时刷新)
jQuery .validate() 不适用于动态创建的表行