如何解决jQuery拖放列表问题
| 我已经在我的网站上创建了一个可拖放列表,并且它的拖放方面似乎正在起作用。每个列表元素的内部都有一个“隐藏”表单字段,其中包含与每个列表元素相关联的数据。 现在,如果我根本不拖动列表并提交表单,则所有内容均按预期提交。但是,如果我将一个元素拖到另一个元素上,则我提交的元素(或DOM被移动的任何元素)都不会提交。不太确定这里发生了什么。这是每个可拖动元素的片段:<ul class=\"sortable ui-sortable\" id=\"sortable_buildings\">
<li class=\"ui-state-default\" id=\"1\" style=\"\"><input type=\"hidden\" name=\"order[]\" value=\"128\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>Carlu</li>
<li class=\"ui-state-default\" id=\"1\"><input type=\"hidden\" name=\"order[]\" value=\"158\"><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>CPR Building</li>
</ul>
还有JQuery的魔力
$(document).ready(function(){
$(\"#sortable_buildings\").sortable();
$(\'#selected_buildings\').change(function(){
$(\'#sortable_buildings\').html(\'\');
var str = \"\";
$(\"#selected_buildings option:selected\").each(function () {
str += \'<li class=\"ui-state-default\" id=\"1\"><input type=\"hidden\" name=\"order[]\" value=\"\' + $(this).attr(\'value\') + \'\" /><span class=\"ui-icon ui-icon-arrowthick-2-n-s\"></span>\' + $(this).text() + \'</li>\'
});
$(\"#sortable_buildings\").append(str);
});
});
编辑:
注意,这对于在表单中创建/修改的所有项目都是一个问题。我将如何正确提交表格?
解决方法
提交时,在
<form>
标记内,每个隐藏元素都应序列化并提交。为此,我认为当您拖动元素时,它超出了the2ѭ标签,因此未提交
另外:您不需要创建隐藏元素来存储<li>
元素的值。您应该遵循以下方法:
.data方法存储任何“ 4”元素的数据
为表单分配一个自定义事件处理程序。
在这种情况下,代码的点(1)将是:
/* store and append <li> tag */
var tempList=$(\"<li>other stuff but no hidden field</li>\");
tempList.data(\"value\",$(this).attr(\"value\"); // store 128/158 whatever you want
$(target).append(tempList);
// bind form submit option
$(this).parent().bind(\"submit\",function()
{
// serialize all <li> tag with data :-)
}
/* retrieve */
,该问题基于表中包含表单元素的表单标签。将表单标签移到表外,元素将正确提交。
附言我只是在FF中被这个问题所困扰,即使在表中使用了表单标签,IE也可以正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。