javascript - JQueryUI: Button inside a draggable div not working when div is dropped -

first post on stackoverflow.

i tried resume issue in title, , made jsfiddle here: http://jsfiddle.net/gbbcj/

the html generated seems correct, button in dragged div not work. tried redefine .button(), no success.

thanks help!

$(".box").draggable({     helper: 'clone' }); $("#left").droppable({     accept: '.box',     drop: function (e, ui) {         $(this).append('<div class="box"></div>');         var droppedbox = $(this).children().last();         $(droppedbox).html(ui.helper.html());     } }); $(".mybutton").click(function () {     alert("clicked"); }); 

use .on()

read event delegation

syntax

$( elements ).on( events, selector, data, handler ); 

---

$(".container").on('click', '.mybutton', function () {     alert("clicked"); }); 

fiddle demo