javascript - .remove() 之后的可调用元素

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 都会绑定(bind)一次功能 block

.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>