在JQuery中动态创建的元素不断添加到DOM
[英]Dynamically created element in JQuery keeps on appending to DOM
问题描述
Here is my problem: 
这是我的问题：
I have this mother of all JQuery code that generate a JQuery UI dialog dynamically and then bind some event and some code on its. 我拥有所有JQuery代码的母亲，这些代码可以动态生成JQuery UI对话框，然后在其上绑定一些事件和一些代码。 Problem is that this dynamic element keep appending to my DOM and brake the execution of javascript. 问题在于此动态元素会不断添加到我的DOM并阻止javascript的执行。
here is the code: 这是代码：
$(
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;
}
}
);
}
}
);
}
);
}
);
}
);
On the DOM side I start with a simple button : 在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"/>
When I click rn_INVITE_1 for the first time everything is cool and work just fine. 当我第一次单击rn_INVITE_1时，一切都很棒，并且一切正常。 Then the DOM looks like this: 然后，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>
I guess this code is ok since its the code JQuery generated. 我猜这个代码是可以的，因为它生成了JQuery的代码。 But if close the newly generated/opened UI Dialog and reopen it the code is reappend to the DOM then it looks like this: 但是，如果关闭新生成/打开的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>
It repeats its self in the DOM for how many time its open. 它在DOM中重复其自身的打开时间。
Problem is not so much that it repeat itself. 问题不仅仅在于它会重演。 its that I now have multiple element with the same ID and that screw up my code real bad. 我现在有多个具有相同ID的元素，这使我的代码搞砸了。
So I was hoping someone could tell me why its appending the code to the DOM every time the dialog is open. 所以我希望有人能告诉我为什么每次打开对话框时都会将代码附加到DOM。
I am open on trying any solution you guys have to stop the 'appending' from happening. 我愿意尝试任何解决方案，以阻止发生“追加”问题。
But I am really just asking what cause this so I can try something myself. 但是我真的只是在问这是什么原因，所以我可以自己尝试一下。
Thanks! 谢谢！
2 个解决方案
解决方案1
0 已采纳 2014-08-19 17:03:34
之所以会这样，是因为关闭对话框并不意味着它会破坏添加到DOM中的内容，您应该在关闭函数时破坏对话框
$(this).dialog('destroy').remove()
解决方案2
0 2014-08-19 17:07:01
Another options is to remove and existing elements when creating the new 另一个选择是在创建新的元素时删除现有元素
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
( .....................
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
函数中创建的元素未追加到DOM - Created Element in function not appending to DOM
两次追加 DOM 元素 (jQuery) - Appending a DOM element twice (jQuery)
jQuery附加到动态创建的div - jQuery appending to a dynamically created div
动态创建的JS或JQuery中的未附加DOM元素有哪些限制？ - What are the limitations on an unattached DOM element in JS or JQuery created dynamically?
如何使用jquery销毁动态创建的DOM元素？ - How to destroy a dynamically created DOM element using jquery?
jQuery：无法检索动态创建的 DOM 元素的属性 - jQuery: Can't retrieve an attribute of a dynamically created DOM element
将动态创建的元素转换为DOM元素 - Convert dynamically created element to DOM element
将字符串转换为jquery元素并将其附加到DOM - Converting a string into a jquery element and appending it to the DOM
使用Javascript / jQuery将已经存在的元素添加到DOM - Appending already present element to DOM with Javascript/jQuery
是否有使用jQuery将文本附加到DOM元素的直接方法？ - Is there a direct way of appending text to a DOM element with jQuery?
相关标签