Question

我需要在退出jQuery对话框后删除元素。我使用.remove()函数，但在.remove()执行后，此元素不可用。

如何在js中“销毁”对象并打开再次调用它的可能性而不刷新父元素。

 $('.createAuthor').click(function () {
        dialog = $('#form').dialog({
            title: 'Add new author',
            closeOnEscape: true,
            modal: true,
            resizable: false,
            draggable: true,
            close: function(event, ui) {
                $(this).dialog("destroy");
                dialog.remove();
            }
        });
        $('.submitAuthors').one('click', function () {
            var fname = $('#fname').val(),
                lname = $('#lname').val(),
                email = $('#email').val();
            $.ajax({
                method: 'POST',
                url: "/sci-profile/authors/approval",
                data: {
                    fname: fname,
                    lname: lname,
                    email: email,
                    articleId: articleId
                },
                success: function(response)
                {
                    $( "#authors tbody" ).append( "<tr>" +
                            "<td>" + fname + ' ' + lname + "</td>" +
                            "<td>" + email + "</td>" +
                            "</tr>" );
                    $('#form')[0].reset();
                    dialog.dialog('destroy');
                }

            });
        });
    });

Answer 1

哦，我犯了多么糟糕的错误。即使我使用.one（）

，我每.createAuthor点击一次绑定功能块一次

.one（）假设限制执行代码内部功能，但不限制外部。

$('.createAuthor').click(function () {
        dialog = $('#form').dialog({
            title: 'Add new author',
            closeOnEscape: true,
            modal: true,
            resizable: false,
            draggable: true,
            close: function(event, ui) {
                $(this).dialog("destroy");
                dialog.remove();
            }
        });
    });

我只需要使用下面的功能单独。

    $('.submitAuthors').one('click', function () {
        var fname = $('#fname').val(),
            lname = $('#lname').val(),
            email = $('#email').val();
        $.ajax({
            method: 'POST',
            url: "/sci-profile/authors/approval",
            data: {
                fname: fname,
                lname: lname,
                email: email,
                articleId: articleId
            },
            success: function(response)
            {
                $( "#authors tbody" ).append( "<tr>" +
                        "<td>" + fname + ' ' + lname + "</td>" +
                        "<td>" + email + "</td>" +
                        "</tr>" );
                $('#form')[0].reset();
                dialog.dialog('destroy');
            }

        });
    });

我必须注意$('.submitAuthors')位于 $('#form')

<form id="form" style="display: none">
            <label for="name">First name</label><input type="text" name="fname" id="fname" class="text ui-widget-content ui-corner-all">
            <label for="name">Last Name</label><input type="text" name="lname" id="lname" class="text ui-widget-content ui-corner-all">
            <label for="email">Email</label><input type="text" name="email" id="email" class="text ui-widget-content ui-corner-all">
            <span class="submitAuthors">Submit</span>
</form>

.remove（）之后的可调用元素

1 个答案: