Draggable jquery object not responding to .click() on the dynamically created object

Question

I am creating a draggable jquery object which needs to be first dragged and moved (copied to main container) and then clicked to be opened as a modal window with further options. I am not able to use .click() on the dynamically created object which was dragged (& copied) to the main conatiner. If a static object is placed there, JS responds to the click.

Main Content.

Elements to Add:

TextGear EmailGear DateGear CheckBoxGear FileGear buttonGear WebGear MobileGear

<div id="sortable" class="col-md-4"><h3>Add Elements here</h3> 
      </div>
<div class="dropzone col-md-4">Drop Here To Remove!</div>

<script>
$('#sortable').dad().addDropzone('.dropzone',function(e){
e.remove(); //e is the jquery object for the dropped element
}); 
$(function(){
$( "#sortable" ).sortable({
revert: true,
helper:"clone"
});
$( ".draggable" ).draggable({
connectToSortable: "#sortable",
helper: "clone",
revert: "invalid"
});

$('.gear').click(function () {
alert('clicked!');
}); 
});
</script>

I am using DAD js to remove object.

Edit 1 : DAD.js (Jquery plugin) is adding drop remove option. Thus leading to click not possible!!!

Answer 1

You could use on('click' on document and target wanted selector. Like this:

$(document).on('click', '.gear', function () {
alert('clicked!');
});