find a element in jQuery dialog after it opens

I'm creating a dialog on the fly. What I'm trying to do next is to bind some of the inputs with .datepicker(), but I can't seem to find the inputs at all. What I'm I missing here?

JSFIDDLE

function createDialog(top, dialog_width, data) {
        $('<div></div>')
            .addClass('add-dialog')
            .appendTo('body')
            .dialog({
                title: 'test',
                closeText: '<i class="fa fa-times"></i>',
                close: function () {
                    $(this).remove();
                },
                open: function (event, ui) {
                    //has the full html with the inputs
                    console.log(this);

                    //trying to get them
                    var inputs = $(this).find('input');
                    console.log(inputs.length);

                    //also tried this, no luck
                    //$(this).parent().promise().done(function() {
                    //    var t = $(this).find('input');
                    //});

                },
                modal: true,
                width: dialog_width,
                position: ['center', (top - 12)],
                draggable: false,
                resizable: false
            }).html(data);
    }

Simply change the initialization order.... add the html, then initialize the dialog

$('<div></div>').html(data).dialog({ /*opts*/})

You are adding the html after the dialog is initialized so the open event has already occurred and there is no element yet to be found

DEMO