Question

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

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对象的引用，然后引用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
            });
    }

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

4 个答案: