Can't target JSON-created block

Question

For some reason I'm having a hard time implementing draggable (either jquery's or draggabilly) on JSON/jquery-created elements.

This is my jQuery along with the 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);
        });
    });
};

and this is how it's called in the html document;

<!-- 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 -->

Now for some reason I can't target the ID (for testing only) nor the class (block) of the block variable. Does anyone know why? The draggable works fine with any other element on the page.

Sincerely, Sebastian

Answer 1

Two things :

• you are appending multiple elements with id="draggable". Ids should be unique.
• there's no evidence of invoking draggabilly on the appended elements.

Draggabilly needs to be invoked on :

• any blocks that already exist on page load
• dynamically created blocks after they have been appended

Personally, I would write the code something like this :

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

Thank you for all responses. I took some advice from your code you published and put it like this;

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

and also defined it further down in the button click function like so;

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

This appeared to solve it for me! Thank you for the help and answers, they solved my problem :)