追加DOM元素不能与jQuery selectable一起使用

时间:2017-06-05 08:16:33

标签: jquery jquery-ui-selectable

尝试将所选项目从一个列表移动到另一个列表,但附加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>
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

  1. 您有拼写错误ui-selectee -> ui-selected

  2. 你添加元素然后实际删除它。添加clone

  3. $('#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>

答案 1 :(得分:0)

<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>