Javascript Can'；t目标JSON创建块

出于某种原因，我很难在JSON/jquery创建的元素上实现DragTable（jquery的或DragTabley的）

这是我的jQuery和JSON

var setTotal = function (){
    var total = 0;
    $('.block').each(function(){
        total = total+parseInt($(this).data('cost'));
    });
    $('.totalSum').html(total);
};

window.onload = function(){ 
    $.getJSON( "ajax/test.json", function( data ) {
        $.each( data.createButton, function( key, val ) {
            var button = $('<button class="btn" id="' + val.name +'" style="background: ' + val.color + '">' + val.name + '</button>');
            button.on("click", function(){  
                //console.log("button " + val.name + " was clicked!");
                var block = $('<div id="draggable" class="block ' + val.name + '-piece">'+ val.name + '<div class="close">-</div></div>');
                block.data('cost', val.cost);
                block.on("click", ".close", function(){
                    $(this).parent().remove();
                    // call set total to refresh it when item is removed
                    setTotal();
                });

                $('#boxes').append(block);
                // call set total to calculate total blocks' cost
                setTotal();
            });
            $('#field').append(button);
        });
    });
};

var setTotal=函数（）{
var合计=0；
$（'.block'）。每个（函数（）{
total=total+parseInt（$（this.data（'cost'））；
});
$（'.totalSum'）.html（总计）；
};
window.onload=函数（）{
$.getJSON（“ajax/test.json”，函数（数据）{
$.each（data.createButton，函数（key，val）{
var按钮=$（''+val.name+''）；
在（“单击”，函数（）{
//log（“单击了按钮“+val.name+”）；
变量块=$（''+val.name+'-'）；
数据块（“成本”，价值成本）；
block.on（“单击”，“关闭”，函数（））{
$（this.parent（）.remove（）；
//调用set total以在删除项目时刷新它
setTotal（）；
});
$（“#框”）。追加（块）；
//调用set total以计算总块成本
setTotal（）；
});
$（“#字段”）.append（按钮）；
});
});
};

这就是它在html文档中的调用方式

<!-- Grab Google CDN's jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>

<!-- Grab draggable -->
<script src="//cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.0/draggabilly.pkgd.min.js"></script>

<!-- My own scripts -->
<script src="js/main.js" type="text/javascript"></script>
<script>
var $draggable = $('#draggable').draggabilly({
// options...
});
</script>

<!-- End scripts -->

变量$draggable=$（'#draggable'）。可拖动({
//选项。。。
});

现在由于某些原因，我无法将block变量的ID（仅用于测试）和类（block）作为目标。有人知道为什么吗？draggable可以与页面上的任何其他元素配合使用

诚恳地说，塞巴斯蒂安有两件事：

• 您正在使用

  id=“draggable”

  附加多个元素。ID应该是唯一的
• 没有证据表明对附加元素调用了

  draggable

需要在以下情况下调用Draggably：

• 页面加载中已存在的任何块
• 附加块后动态创建的块

就我个人而言，我会这样写代码：

window.onload = function() {
    var draggabilly_options = {
        // options...
    };
    function create_button(key, val) {
        $('<button/>', {
            'id': val.name,
            'class': 'btn',
            'style': 'background-color:' + val.color,
            'html': val.name,
        })
        .appendTo("#field")
        .on('click', create_block.bind(val));
    }
    function create_block() {
        $('<div/>' {
            'class': 'block ' + this.name + '-piece',
            'html': this.name + '<div class="close">-</div>'
        })
        .appendTo('#boxes')
        .draggabilly(draggabilly_options) //invoke draggabilly on the div.block just added
        .data('cost', this.cost)
        .find('.close')
        .on('click', close);
    }

    function close() {
        $(this).closest(".block").remove();
        setTotal();
    }

    function setTotal() {
        var total = 0;
        $(".block").each(function() {
            total += parseInt($(this).data('cost'));
        });
        $('.totalSum').html(total);
    };

    $.getJSON( "ajax/test.json", function(data) {
        $.each(data.createButton, create_button);
        setTotal();
    });

    //You need this only if the page loads with any "draggable" blocks already in place.
    $("#boxes .block").draggabilly(draggabilly_options);
};

window.onload=function（）{
变量拖动选项={
//选项。。。
};
功能创建按钮（键，val）{
$('', {
“id”：val.name，
“类”：“btn”，
“样式”：“背景色：”+val.color，
“html”：val.name，
})
.appendTo（“#字段”）
.on（'click'，create_block.bind（val））；
}
函数create_block（）{
$('' {
'class'：'block'+this.name+'-piece'，
'html'：this.name+'-'
})
.appendTo（“#box”）
.Draggably（Draggably_选项）//在刚刚添加的div.block上调用Draggably
.data（'成本'，此.cost）
.find（“.close”）
。打开（“单击”，关闭）；
}
函数关闭（）{
$（this）.closed（“.block”）.remove（）；
setTotal（）；
}
函数setTotal（）{
var合计=0；
$（“.block”）。每个（函数（）{
总计+=parseInt（$（this）.data（'cost'）；
});
$（'.totalSum'）.html（总计）；
};
$.getJSON（“ajax/test.json”，函数（数据）{
$.each（data.createButton、create_按钮）；
setTotal（）；
});
//只有当页面加载了任何已就位的“可拖动”块时，才需要此选项。
$（“#box.block”）.draggabilly（draggabilly_选项）；
};
感谢您的回复。我从您发布的代码中得到了一些建议，并将其如下所示：

// Start this after window is loaded
window.onload = function(){ 
// Init draggabilly
var draggabilly_options = {
    // Dragabilly options
    containment: '#boxes',
    grid: [ 100, 100 ]
};

并在按钮点击功能中进一步定义，如下所示

    button.on("click", function(){
        var block = $('<div id="block-' + val.id + '" class="block ' + val.name + '-piece"></div>');
        var close = $('<div class="close">-</div>');
        $(block).append(close);
        block.data('cost', val.cost);
        block.draggabilly(draggabilly_options);

按钮。在（“单击”，函数（）上）{
变量块=$（''）；
var close=$（'-'）；
$（块）。追加（关闭）；
数据块（“成本”，价值成本）；
block.draggabily（draggabily_选项）；

这似乎为我解决了问题！谢谢你的帮助和回答，他们解决了我的问题：）
在将block元素添加到DOM后，您是否尝试调用Draggably方法？不，我没有，我会尝试！谢谢。关于不应该存在的ID。将其视为仅使用类。如果您的意思是这样，我没有尝试在实际创建的jQuery中调用它。我已经在答案中添加了一些。您应该这样做能够创建块而不指定给
块
，然后链接jQuery方法，即
var close=$（…）；，$（…）.append（close）.data（'cost'，val.cost.）.draggabily（draggabily_选项）
。