Question

我尝试添加输入字段，并在卡片上添加标签（用户通过按钮添加卡片）。但它没有成功。它不是将这些输入字段添加到卡中，而是将它们放在收件箱列表中。能帮助我解决问题吗？

$('document').ready(function () {

    $('#AddCardBtn').click(function () {

        var numberOfDiv = [100];

        with(document) {
            var newDiv = createElement('div');

            var div = getElementById('userAddedDiv').appendChild(newDiv);

            for (var i = 0; i < numberOfDiv; i++) {
                numberOfDiv[i] = div;
            }
        }
    });

    $(function () {

        $('#userAddedDiv').sortable({
            containment: 'document',
            cursor: 'crosshair',
            opacity: '0.70',
            connectWith: '#onHoldList',
            hoverClass: '.border'
        });

        $('#onHoldList').sortable({
            containment: 'document',
            cursor: 'crosshair',
            opacity: '0.70',
            connectWith: '#userAddedDiv',
            hoverClass: '.border'
        });
    });

});

更新

我在文本字段中修改了代码以设置字符串值。该值来自对话框窗口。它工作正常。然后我的问题是，当我在收件箱列表中添加一张新卡时，我想在其上设置一个新的字符串值。它运作良好。但同时将相同的字符串值添加到第一张卡片中。您可以尝试添加到卡中并进行测试。我有一个演示： http://jsfiddle.net/AdiT/xMK53/4/

Jquery的：

$('document').ready(function () {
    // Click function to add a card
    $('#AddCardBtn').click(function () {
        // Array of Card
        var numberOfCards = [100];


            // Create a new card
            var $div = $('<div />').addClass('sortable-div');
            $('#userAddedCard').append($div);

            $('<label>Title</label>').appendTo($div);              
            $('#Getbtn').click(function () {
                $('<input/>', { "type": "text", "value": $("#customTextBox").val() }).appendTo($div);
                $('<input/>', { "type": "text", "value": $("#datepicker").val() }).appendTo($div);
            });    
            // Sort cards in array
            for (var i = 0; i < numberOfCards; i++) {
                numberOfCards[i] = $div.clone(true);
            }

    });

Answer 1

Live Demo

$(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(), 
         date=$("#datepicker").val();
      $currentTarget.find(".ctb").val(val);
      $currentTarget.find(".date").val(date);
      $('#modalDialog').dialog("close");
    });
});

向div添加输入字段的问题

1 个答案: