打开后在 jQuery 对话框中找到一个元素

Question

我正在动态创建一个对话框。我接下来要做的是将一些输入与.datepicker() 绑定，但我似乎根本找不到输入。我在这里错过了什么？

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

Answer 1

只需更改初始化顺序....添加html，然后初始化对话框

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

您在对话框初始化后添加 html，因此 open 事件已经发生并且还没有找到任何元素

DEMO

Answer 2

您可以为所需的每个元素指定一个类，例如：

<input type='text' class='needIt'/>

然后使用：

$(this).find('.needIt')

Answer 3

您需要在 jquery 对象插入 DOM 后保存对它的引用，然后获取对 jquery UI 对话框实例的引用。这个实例有很多有用的属性。示例：

$('form').append($body); // I've appended dialog as last element inside form in my document, $body is markup, received from AJAX

$body.dialog({...}); // I've turned markup into jquery UI dialog

var dialogInstance = $body.dialog('instance'); // I receive reference to jquery UI dialog instance in any place, for instance, button click event

dialogInstance.uiDialogButtonPane.hide(); // I can access button pane in the dialog and many other objects, like caption area, etc.

Answer 4

尝试在 appendTo() 之后添加 html

function createDialog(top, dialog_width, data) {
        $('<div></div>')
            .addClass('add-dialog')
            .html(data)// added html here
            .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
            });
    }