無法定位JSON創建的塊

Question

出於某種原因，我很難在JSON/jQuery創建的元素上實現可拖動（jQuery或可拖動）。

這是我的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); 
     }); 
    }); 
}; 

這就是它在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 --> 

現在由於某種原因，我無法定位塊變量的ID（僅測試），也不是類（塊）。有誰知道爲什麼？可拖動的頁面上的任何其他元素都可以正常工作。

真誠，塞巴斯蒂安

Answer 1

兩件事情：

• 要附加多個元素與id="draggable"。 Ids應該是唯一的。
• 沒有證據在附加元素上調用draggabilly。

Draggabilly需要在被調用：

• 已經在頁面加載存在任何塊，他們已經附加

個人

動態創建塊後，我會寫代碼如下：

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); 
}; 

Answer 2

謝謝你的迴應。我從你發佈的代碼中得到了一些建議，並且把它寫成這樣;

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

這似乎是爲我解決它！感謝您的幫助和答案，他們解決了我的問題:)