Element dragged to sortable does not respond

Question

I am trying to drag elements from a div of block elements to the sortable div. To drag the elements inside the #block div there's no handle, but inside the #sortable div there is a handle to drag the elements, which is displayed when clicked on the element. The problem is that the element which are dragged from the #block div does respond when dragged from #block div to #sortable div, it does not display the .drag_handle .

js:

  $('#content #sortable .draggable').on("click", function() {
    draggable = $(this);
    $('.draggable .drag_handle').hide();
    draggable.find('.drag_handle').show();
    console.log(draggable);
  })

  $(document).on("click", function(event) {
    if( !$(event.target).closest('.draggable').length ) {
      draggable.find('.drag_handle').hide();
    }
  })

  $('#content #sortable').sortable({
    handle: '.drag_handle'
  });

  $('#blocks .draggable').draggable({
    helper: "clone",
    revert: "invalid",
    connectToSortable: '#content #sortable'
  });

demo at codepen

What am I missing? Your help and guidance will be much appreciated. Thank you.

Answer 1

You miss the part that your dragged element to #sortable is a new DOM element and has no click event attached. Thus the easiest way here is to change this

$('#content #sortable .draggable').on("click", function() {
draggable = $(this);
$('.draggable .drag_handle').hide();
draggable.find('.drag_handle').show();
console.log(draggable);
})

to this

$(document).on("click",'#content #sortable .draggable',function() {
draggable = $(this);
$('.draggable .drag_handle').hide();
draggable.find('.drag_handle').show();
console.log(draggable);
})

see at codepen : http://codepen.io/anon/pen/MaprKd