카드에 고유 한 대화 상자를 만드는 방법

Question

받은 편지함 목록에 카드를 추가하면 카드를 두 번 클릭하면 대화 상자 창이 열립니다. 대화 상자 창에서 캘린더에서 날짜를 선택하고 입력 필드에 문자열 값을 입력하고 동적 확인란을 만들 수 있습니다. 그런 다음 버튼 (Get Value)을 누르면 값이 카드에 표시됩니다. 이것은 잘 작동합니다. 문제는받은 편지함에 다른 카드를 추가하고 두 번 클릭하여 대화 상자 창을 열면 이전 대화 상자 창과 같은 값이 표시됩니다. 나는 그것을 원하지 않는다. 새 카드를 추가 할 때마다 한 번 더 클릭하면 대화 상자 창에 값이 표시되지 않습니다.

솔루션이 카드를 고유하게 만들 수 있다고 생각하지만 확실하지 않습니다.

도와주세요. 일부 코드를 제공해주세요.

DEMO

HTML :

<!--Inbox list and button to add a card--> 
    <div id="inboxList" class="cellContainer"> 
     <p style="display: inline">Inbox</p> 
     <!--Button to add a Card--> 
     <input type="button" id="AddCardBtn" value="+ Add a Card..."/> <hr class="fancy-line"/> <br/> 

     <!--Card div--> 
     <div id="userAddedCard"> <br/> 
      <div> 

      </div> 
     </div> 
    </div> 


</div> 
<!--Modal Dialog--> 
<div id="modalDialog"> 

    <form> 
     <label>Title</label> 
     <input type="text" id="customTextBox" value="some value"/> 
     <p>Date: <input type="text" id="datepicker" value="some date"/></p> 
     <input type="button" id="Getbtn" value="Get value"/> <hr/><br/> 

     <label>Add checkBox</label> 
     <br /> 
     <div id="progressbar"></div> 
     <br /> 
     <input type="text" id="checkBoxName" /> 
     <input type="button" id="btnSaveCheckBox" value="_Ok" /> 
     <br /> 

    </form> 

</div> 
<!--Reference to Jquery--> 

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); 
     $('#userAddedCard').append($newDiv); 

    }); 

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

     $('#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()); 
     $('#modalDialog').dialog("close"); 
    }); 

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

    function addCheckbox(name) { 
     var container = $('#modalDialog'); 
     var inputs = container.find('input'); 
     var id = inputs.length + 1; 

     $('<input />', { type: 'checkbox', id: 'cb' + id, value: name }).appendTo(container); 
     $('<label />', { 'for': 'cb' + id, text: name }).appendTo(container); 
     $('<br/>').appendTo(container); 


    }  
}); 

Answer 1

for your code add the lines that i added 
$(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); 
    $('#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').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()); 
    document.getElementById('customTextBox').value="";//add this line 
    document.getElementById('datepicker').value="";//add this line 
    $('.allcheckbox').remove();//add this line 
    $('#modalDialog').dialog("close"); 
}); 

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

function addCheckbox(name) { 
    var container = $('#modalDialog'); 
    var inputs = container.find('input'); 
    var id = inputs.length + 1; 

    $('<input />', { type: 'checkbox', class: 'allcheckbox', id: 'cb' + id, value: name }).appendTo(container);//add the attribute class 
    $('<label />', { 'for': 'cb' + id, class: 'allcheckbox', text: name }).appendTo(container);//add the attribute class 
    $('<br/>').appendTo(container); 


}  

});