將複選框插入正確位置的問題

Question

將卡添加到收件箱時出現問題。然後可以雙擊卡片，彈出對話框。

當我想在對話框中創建動態複選框時，我有問題將它們插入到正確的位置。我想將它們放在輸入字段下方，而不是在圖像下方。我現在不是'如何以我描述的這種方式放置它們。我會感謝幫助。

Demo

的Jquery：

$(function() { 
    // Click function to add a card 
    var $div = $('<div />').addClass('sortable-div'); 
    $('<label>Title</label><br/>').appendTo($div); 
    $('<input/>', { 
     "type": "text", 
      "class": "ctb" 
    }).appendTo($div); 
    $('<input/>', { 
     "type": "text", 
      "class": "date" 
    }).appendTo($div); 
    var cnt = 0, 
     $currentTarget; 
    $('#AddCardBtn').click(function() { 
     var $newDiv = $div.clone(true); 
     cnt++; 
     $newDiv.prop("id", "div" + cnt); 

     $newDiv.data('checkboxes', []); 

     $('#userAddedCard').append($newDiv); 
     //  alert($('#userAddedCard').find("div.sortable-div").length);   
    }); 

    // Double click to open Modal Dialog Window 
    $('#userAddedCard').dblclick(function (e) { 
     $currentTarget = $(e.target); 

     $('#modalDialog #customTextBox').val($currentTarget.children('.ctb').val()); 
     $('#modalDialog #datepicker').val($currentTarget.children('.date').val()); 

     $('.allcheckbox').remove(); // Remove checkboxes 
     $('#modalDialog').data('checkboxes', []); /* Reset dialog checkbox data */ 

     /* Add checkboxes from card data */ 
     $.each($currentTarget.data('checkboxes'), function (i, checkbox) { 
      addCheckbox(checkbox.name, checkbox.status); 
     }); 

     $('#modalDialog').dialog({ 
      modal: true, 
      height: 600, 
      width: 500, 
      position: 'center' 
     }); 
     return false; 

    }); 
    $("#datepicker").datepicker({ 
     showWeek: true, 
     firstDay: 1 
    }); 

    $("#Getbtn").on("click", function() { 
     var val = $("#customTextBox").val(); 
     $currentTarget.find(".ctb").val(val); 
     $currentTarget.find(".date").val($("#datepicker").val()); 

     $currentTarget.data('checkboxes', $('#modalDialog').data('checkboxes')); /* Copy checkbox data to card */ 

     $('#modalDialog').dialog("close"); 
    }); 

    // Add a new checkBox 
    $('#btnSaveCheckBox').click(function() { 
     addCheckbox($('#checkBoxName').val()); 
     $('#checkBoxName').val(""); 
    }); 

    function addCheckbox(name, status) { 
     status = status || false; 

     var container = $('#modalDialog'); 
     var inputs = container.find('input'); 
     var id = inputs.length + 1; 
     var data = { 
      status: status, 
      name: name 
     }; 

     var div = $('<div />', { class: 'allcheckbox' }); 
     $('<input />', { 
      type: 'checkbox', 
      id: 'cb' + id, 
      value: name 
     }).prop('checked', status).on('change', function() { 
      data.status = $(this).prop('checked'); 
     }).appendTo(div); /* set checkbox status and monitor changes */ 

     $('<label />', { 
      'for': 'cb' + id, 
      text: name 
     }).appendTo(div); 

     div.appendTo(container); 

     container.data('checkboxes').push(data); 
    } 

}); 

Answer 1

試試這個http://jsfiddle.net/62QY8/72/

HTML

 <div id="boxs"></div> 

JS

var container = $('#boxs'); 
    ... 
    $('#boxs').data('checkboxes')); /* Copy checkbox data */ 
    ...  
    $('#boxs').data('checkboxes', []); /* Reset dialog checkbox data */