附加 DOM 元素不适用于 jQuery 可选
Posted
技术标签:
【中文标题】附加 DOM 元素不适用于 jQuery 可选【英文标题】:Append DOM element not working with jQuery selectable 【发布时间】:2017-11-05 23:15:45 【问题描述】:尝试将所选项目从一个列表移动到另一个,但附加 dom 元素不起作用:
//Assign action modules
$('#Modal_Task #assigned_module').click(function ()
var list = $("#Modal_Task .unassigned li.ui-selected");
$('#Modal_Task .assigned').append(list);
list.remove();
);
//UnAssign action modules
$('#Modal_Task #unassigned_module').click(function ()
var list = $("#Modal_Task .assigned li.ui-selected");
$('#Modal_Task .unassigned').append(list);
list.remove();
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal fade in" id="Modal_Task" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in"></div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Link Tasks</h4>
</div>
<div class="modal-body">
<div class="row" id="actionee_modal">
<div id="info_message_task" class="alert hidden-element dv-message"></div>
<div class="col-md-4 side-box">
<label>Unassigned:</label>
<div class="selectable-wraper">
<ul class="unassigned selectable ui-selectable"><li data-id="3" class="ui-selectee"><strong class="ui-selectee">Title 3</strong></li><li data-id="2" class="ui-selectee"><strong class="ui-selectee">Title 2</strong></li></ul>
</div>
</div>
<div class="col-md-2 center-box">
<label>Action</label>
<button type="button" class="btn btn-success btn-xs" id="assigned_module"><i class="fa fa-arrow-circle-right"></i></button>
<button type="button" class="btn btn-danger btn-xs" id="unassigned_module"><i class="fa fa-arrow-circle-left"></i></button>
</div>
<div class="col-md-4 side-box">
<label>Assigned:</label>
<div class="selectable-wraper">
<ul class="assigned selectable ui-selectable"></ul>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save_task">Save changes</button>
</div>
</div>
</div>
</div>
【问题讨论】:
【参考方案1】:你有错别字ui-selectee -> ui-selected
你添加元素然后立即删除它。添加clone。
$('#Modal_Task #assigned_module').click(function ()
var list = $("#Modal_Task .unassigned li.ui-selected");
$('#Modal_Task .assigned').append(list.clone());
list.remove();
);
$('#Modal_Task #unassigned_module').click(function ()
var list = $("#Modal_Task .assigned li.ui-selected");
$('#Modal_Task .unassigned').append(list.clone());
list.remove();
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal fade in" id="Modal_Task" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
<div class="modal-backdrop fade in"></div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Link Tasks</h4>
</div>
<div class="modal-body">
<div class="row" id="actionee_modal">
<div id="info_message_task" class="alert hidden-element dv-message"></div>
<div class="col-md-4 side-box">
<label>Unassigned:</label>
<div class="selectable-wraper">
<ul class="unassigned selectable ui-selectable">
<li data-id="3" class="ui-selected">
<strong class="ui-selected">Title 3</strong>
</li>
<li data-id="2" class="ui-selected">
<strong class="ui-selected">Title 2</strong>
</li>
</ul>
</div>
</div>
<div class="col-md-2 center-box">
<label>Action</label>
<button type="button" class="btn btn-success btn-xs" id="assigned_module"><i class="fa fa-arrow-circle-right">1</i></button>
<button type="button" class="btn btn-danger btn-xs" id="unassigned_module"><i class="fa fa-arrow-circle-left">2</i></button>
</div>
<div class="col-md-4 side-box">
<label>Assigned:</label>
<div class="selectable-wraper">
<ul class="assigned selectable ui-selectable"></ul>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save_task">Save changes</button>
</div>
</div>
</div>
</div>
【讨论】:
【参考方案2】:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal fade in" id="Modal_Task" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in"></div>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Link Tasks</h4>
</div>
<div class="modal-body">
<div class="row" id="actionee_modal">
<div id="info_message_task" class="alert hidden-element dv-message"></div>
<div class="col-md-4 side-box">
<label>Unassigned:</label>
<div class="selectable-wraper">
<ul class="unassigned selectable ui-selectable">
<li data-id="3" class="ui-selected">
<strong class="ui-selected">Title 3</strong>
</li>
<li data-id="2" class="ui-selected">
<strong class="ui-selected">Title 2</strong>
</li>
</ul>
</div>
</div>
<div class="col-md-2 center-box">
<label>Action</label>
<button type="button" class="btn btn-success btn-xs" id="assigned_module"><i class="fa fa-arrow-circle-right"></i>right</button>
<button type="button" class="btn btn-danger btn-xs" id="unassigned_module"><i class="fa fa-arrow-circle-left"></i>left</button>
</div>
<div class="col-md-4 side-box">
<label>Assigned:</label>
<div class="selectable-wraper">
<ul class="assigned selectable ui-selectable"></ul>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="save_task">Save changes</button>
</div>
</div>
</div>
</div>
<script>
//Assign action modules
$('#Modal_Task #assigned_module').click(function ()
var list = $("#Modal_Task .unassigned li.ui-selected");
$('#Modal_Task .assigned').append(list);
list.remove();
);
//UnAssign action modules
$('#Modal_Task #unassigned_module').click(function ()
var list = $("#Modal_Task .assigned li.ui-selected");
$('#Modal_Task .unassigned').append(list);
list.remove();
);
</script>
【讨论】:
以上是关于附加 DOM 元素不适用于 jQuery 可选的主要内容,如果未能解决你的问题,请参考以下文章
为啥以下创建 DOM 元素的方式不适用于 IE7 和 IE8 中的 jQuery?
Jquery Droppable 不适用于文件上传拖放,抛出错误:预期的 DOM 元素或视图