Anfügen DOM-Element nicht mit jQuery wählbaren Arbeits

Question

Versuchen ausgewähltes Element aus einer Liste in einer anderen zu bewegen, aber dom Element nicht funktioniert hängen:

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

Answer 1

1. Sie haben Fehler ui-selectee -> ui-selected

2. Ur hinzufügen das Element entfernt es dann sofort. Fügen Sie eine clone hinzu.

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

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