Question

这是我的问题：

我有所有JQuery代码的母亲，它动态生成一个JQuery UI对话框，然后绑定一些事件和一些代码。问题是这个动态元素不断附加到我的DOM并制止javascript的执行。

这是代码：

$(
    function()
    {
        $("#rn_INVITE_1").on //This is a button
        (
            "click",
            function()
            {
                $.ajax
                (
                    {
                        url:"prc.php",
                        type:"POST",
                        data:{invite:"someData"},
                        contentType : "application/x-www-form-urlencoded;charset=UTF-8"
                    }
                ).done
                (
                    function(data)
                    {
                        $(
                            '<div id="rn_INVITER_1" name="rn_INVITE_1" title="Inviter:">'+
                                '<div style="clear:both;"><br></div>'+
                                '<label for="rn_INVITER_TXT_1">Inviter:</label>'+
                                '<input id="rn_INVITER_TXT_1" name="rn_INVITER_TXT_1" type="text" size="50" value="'+data+'"/>'+
                                '<div style="clear:both;"><br></div>'+
                            '</div>'
                        ).dialog
                        (
                            {
                                resizable: false,
                                modal: true,
                                height: 250,
                                width: 900,
                                buttons:
                                {
                                    Close:
                                    function()
                                    {
                                        $.ajax
                                        (
                                            {
                                                url:"prc.php",
                                                type:"POST",
                                                data:
                                                {
                                                    event: "inviter",
                                                    inviter: $("#rn_INVITER_TXT_1").val(),
                                                    sama:"person1",
                                                    dtstart:"2014-08-15 16:14:30"
                                                },
                                                contentType : "application/x-www-form-urlencoded;charset=UTF-8"
                                            }
                                        ).done
                                        (
                                            function(poiu)
                                            {
                                                console.log(poiu);
                                            }
                                        );

                                        $(this).dialog("close");
                                    }
                                },
                                create:
                                function()
                                {
                                    $("#rn_INVITER_TXT_1").autocomplete
                                    (
                                        {
                                            minlength: 0,
                                            source:
                                            function(request, response)
                                            {
                                                //user is already created elsewhere. 
                                                response($.ui.autocomplete.filter(user, extractLast(request.term)));
                                            },
                                            focus:
                                            function()
                                            {
                                                return false;
                                            },
                                            select:
                                            function(event, ui)
                                            {
                                                //split is define elsewhere
                                                var terms = split(this.value);
                                                terms.pop();
                                                terms.push(ui.item.value);
                                                terms.push("");
                                                this.value = terms.join(", ");
                                                return false;
                                            }
                                        }
                                    );
                                }
                            }
                        );
                    }
                );
            }
        );
    }
);

在DOM方面，我从一个简单的按钮开始：

<input id="rn_INVITE_1" name="rn_INVITE_1" class="ui-corner-all ui-state-active" type="button" style="width:200px;float:left;" value="Inviter"/>

当我第一次点击rn_INVITE_1时，一切都很酷，工作得很好。然后DOM看起来像这样：

<input id="rn_INVITE_1" name="rn_INVITE_1" class="ui-corner-all ui-state-active" type="button" style="width:200px;float:left;" value="Inviter"/>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" tabindex="-1" role="dialog" style="height: auto; width: 900px; top: 204px; left: 505.5px; display: none;" aria-describedby="rn_INVITER_1" aria-labelledby="ui-id-5">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span id="ui-id-5" class="ui-dialog-title">Inviter:</span>
        <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
            <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
            <span class="ui-button-text">close</span>
        </button>
    </div>
    <div id="rn_INVITER_1" name="rn_INVITE_1" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 97px;">
        <div style="clear:both;"><br></div>
        <label for="rn_INVITER_TXT_1">Inviter:</label>
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <input id="rn_INVITER_TXT_1" name="rn_INVITER_TXT_1" type="text" size="50" value="some value" class="ui-autocomplete-input" autocomplete="off">
        <div style="clear:both;"><br></div>
    </div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
                <span class="ui-button-text">Close</span>
            </button>
        </div>
    </div>
    <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-6" tabindex="0" style="display: none;">
    </ul>
</div>

我猜这段代码是好的，因为它生成了代码JQuery。但是如果关闭新生成/打开的UI对话框并重新打开它，代码将重新连接到DOM，那么它看起来像这样：

<input id="rn_INVITE_1" name="rn_INVITE_1" class="ui-corner-all ui-state-active" type="button" style="width:200px;float:left;" value="Inviter"/>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" tabindex="-1" role="dialog" style="height: auto; width: 900px; top: 204px; left: 505.5px; display: none;" aria-describedby="rn_INVITER_1" aria-labelledby="ui-id-5">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span id="ui-id-5" class="ui-dialog-title">Inviter:</span>
        <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
            <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
            <span class="ui-button-text">close</span>
        </button>
    </div>
    <div id="rn_INVITER_1" name="rn_INVITE_1" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 97px;">
        <div style="clear:both;"><br></div>
        <label for="rn_INVITER_TXT_1">Inviter:</label>
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <input id="rn_INVITER_TXT_1" name="rn_INVITER_TXT_1" type="text" size="50" value="some value" class="ui-autocomplete-input" autocomplete="off">
        <div style="clear:both;"><br></div>
    </div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
                <span class="ui-button-text">Close</span>
            </button>
        </div>
    </div>
    <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-6" tabindex="0" style="display: none;">
    </ul>
</div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" tabindex="-1" role="dialog" style="height: auto; width: 900px; top: 204px; left: 505.5px; display: none;" aria-describedby="rn_INVITER_1" aria-labelledby="ui-id-5">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span id="ui-id-5" class="ui-dialog-title">Inviter:</span>
        <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
            <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
            <span class="ui-button-text">close</span>
        </button>
    </div>
    <div id="rn_INVITER_1" name="rn_INVITE_1" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 97px;">
        <div style="clear:both;"><br></div>
        <label for="rn_INVITER_TXT_1">Inviter:</label>
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <input id="rn_INVITER_TXT_1" name="rn_INVITER_TXT_1" type="text" size="50" value="some value" class="ui-autocomplete-input" autocomplete="off">
        <div style="clear:both;"><br></div>
    </div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
                <span class="ui-button-text">Close</span>
            </button>
        </div>
    </div>
    <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-6" tabindex="0" style="display: none;">
    </ul>
</div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" tabindex="-1" role="dialog" style="height: auto; width: 900px; top: 204px; left: 505.5px; display: none;" aria-describedby="rn_INVITER_1" aria-labelledby="ui-id-5">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span id="ui-id-5" class="ui-dialog-title">Inviter:</span>
        <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
            <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
            <span class="ui-button-text">close</span>
        </button>
    </div>
    <div id="rn_INVITER_1" name="rn_INVITE_1" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 97px;">
        <div style="clear:both;"><br></div>
        <label for="rn_INVITER_TXT_1">Inviter:</label>
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <input id="rn_INVITER_TXT_1" name="rn_INVITER_TXT_1" type="text" size="50" value="some value" class="ui-autocomplete-input" autocomplete="off">
        <div style="clear:both;"><br></div>
    </div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
                <span class="ui-button-text">Close</span>
            </button>
        </div>
    </div>
    <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-6" tabindex="0" style="display: none;">
    </ul>
</div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable" tabindex="-1" role="dialog" style="height: auto; width: 900px; top: 204px; left: 505.5px; display: none;" aria-describedby="rn_INVITER_1" aria-labelledby="ui-id-5">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span id="ui-id-5" class="ui-dialog-title">Inviter:</span>
        <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
            <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
            <span class="ui-button-text">close</span>
        </button>
    </div>
    <div id="rn_INVITER_1" name="rn_INVITE_1" class="ui-dialog-content ui-widget-content" style="display: block; width: auto; min-height: 0px; max-height: none; height: 97px;">
        <div style="clear:both;"><br></div>
        <label for="rn_INVITER_TXT_1">Inviter:</label>
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <input id="rn_INVITER_TXT_1" name="rn_INVITER_TXT_1" type="text" size="50" value="some value" class="ui-autocomplete-input" autocomplete="off">
        <div style="clear:both;"><br></div>
    </div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">
                <span class="ui-button-text">Close</span>
            </button>
        </div>
    </div>
    <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" id="ui-id-6" tabindex="0" style="display: none;">
    </ul>
</div>

它在DOM中重复了它自己打开的时间。

问题不在于它重演。它现在我有多个具有相同ID的元素，这使我的代码变得非常糟糕。

所以我希望有人可以告诉我为什么每次打开对话框时都会将代码附加到DOM。

我愿意尝试任何解决方案，你们不得不停止追加＆＃39;从发生。

但我真的只是问这是什么原因所以我可以自己尝试一下。

谢谢！

Answer 1

这是会发生的，因为关闭对话框并不意味着它会破坏它添加到DOM的内容，你应该销毁关闭函数的对话框

                   $(this).dialog('destroy').remove()

Answer 2

另一个选择是在创建新

时删除和现有元素

 function(data)
                    {
                      **$("#rn_INVITER_1").remove();**
                        $(
                            '<div id="rn_INVITER_1" name="rn_INVITE_1" title="Inviter:">'+
                                '<div style="clear:both;"><br></div>'+
                                '<label for="rn_INVITER_TXT_1">Inviter:</label>'+
                                '<input id="rn_INVITER_TXT_1" name="rn_INVITER_TXT_1" type="text" size="50" value="'+data+'"/>'+
                                '<div style="clear:both;"><br></div>'+
                            '</div>'
                        ).dialog
                        ( .....................

JQuery中动态创建的元素不断追加到DOM

2 个答案: