[英]Access newly created DOM elements for looping
I'm using jQuery sortable + jQuery draggable to put together a page that adds and removes images to a slideshow. 我正在使用jQuery sortable + jQuery draggable来组合一个页面,该页面可以向幻灯片中添加和删除图像。 I have it set up now such that I can drag in new screens and drop them into the named sequences I want, and it'll create the DOM elements I need. 现在,我已经对其进行了设置,以便可以在新屏幕中将其拖放到所需的命名序列中,它将创建所需的DOM元素。
I am successfully scanning the page for the necessary elements and committing them to an array, but it never picks up the newly added items. 我已经成功地在页面上扫描了必要的元素并将它们提交到数组中,但是它从未拾取新添加的项目。 So for example, I have the following elements to begin with: 因此,例如,我有以下元素开始:
<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
<li data-screen="screen1">Screen 1</li>
<li data-screen="screen2">Screen 2</li>
<li data-screen="screen3">Screen 3</li>
</ul>
...and I then add a row: ...然后我添加一行:
<h3 data-sequence-title="sequence1">Sequence 1</h3>
<ul class="sortable connectedSortable ui-sortable">
<li data-screen="screen1">Screen 1</li>
<li data-screen="screen2">Screen 2</li>
<li data-screen="screen3">Screen 3</li>
<li data-screen="screen4">Screen 4</li>
</ul>
jQuery will only ever return the first elements, not the updated ones. jQuery只会返回前一个元素,而不会返回更新后的元素。 Here's the js I'm using: 这是我正在使用的js:
$( document.body ).on('click', '.submit', function(){
// Build nested array from DOM elements
var jsonObj = [];
$('.sortable').prev('h3').each(function(){
var obj = {
title: $(this).data("sequence-title"),
Screens: []
};
$(this).next("ul").children('li').each(function() {
obj.Screens.push({
image: $(this).data("screen")
});
});
jsonObj.push(obj);
});
});
Code that adds new LIs: 添加新LI的代码:
// Initialize draggable / droppable functionality
$('.sortable').sortable({
placeholder: 'ui-state-highlight',
revert: true
});
$('.draggable li').draggable({
connectToSortable: '.sortable',
helper: 'clone',
revert: 'invalid'
});
$('.sortable').disableSelection();
I need to return the modified DOM, not the elements that were there when I loaded the page. 我需要返回修改后的DOM,而不是加载页面时存在的元素。
I did a quick experiment based on your code. 我根据您的代码进行了快速实验。 I am able to drag elements from below and add them to the first sequence. 我可以从下面拖动元素并将其添加到第一个序列。 Then they are accessible when the clicky button is clicked. 然后,在单击clicky按钮时可以访问它们。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div id="moo">clicky</div>
<ul class="sortable connectedSortable ui-sortable">
<h3 data-sequence-title="sequence1">Sequence 1</h3>
<li data-screen="s1screen1">Seq 1 Screen 1</li>
<li data-screen="s1screen2">Seq 1 Screen 2</li>
<li data-screen="s1screen3">Seq 1 Screen 3</li>
</ul>
<ul class="draggable">
<h3 data-sequence-title="sequence2">Dragable Sequence (Drag these elements up and assign to sequence 1)</h3>
<li data-screen="s2screen1">Seq 2 Screen 1</li>
<li data-screen="s2screen2">Seq 2 Screen 2</li>
<li data-screen="s2screen3">Seq 2 Screen 3</li>
</ul>
<script>
$(document.getElementById('moo')).on('click', function(){
// Build nested array from DOM elements
var jsonObj = [];
$('.sortable h3').each(function(){
var obj = {
title: $(this).data("sequence-title"),
Screens: []
};
$(this).siblings("li").each(function() {
obj.Screens.push({
image: $(this).data("screen")
});
});
jsonObj.push(obj);
});
alert(JSON.stringify(jsonObj));
});
// Initialize draggable / droppable functionality
$('.sortable').sortable({
placeholder: 'ui-state-highlight',
revert: true
});
$('.draggable li').draggable({
connectToSortable: '.sortable',
helper: 'clone',
revert: 'invalid'
});
$('.sortable').disableSelection();
</script>
</body>
</html>
在将元素添加到可排序对象之后,您必须更新组件:
$(".sortable").sortable("refresh");
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.