当我用 jQuery 单击新按钮时,它会添加 div,但它只添加一个。当我从 DevTools 检查时,它不断创建相同的位置。但我希望它在那之后再添加一个。你能帮我吗?
HTML 代码
<div class="text-left" style="margin-bottom: 15px;">
<button type="button" class="add-extra-email-button btn btn-success" disabled><i class="fas fa-plus"></i></button>
</div>
<div class="clone"></div>
这里是示例 js 代码
$('.add-extra-email-button').click(function() {
var element = $('.clone');
element.html(
'<div class="clone_edilen_email">' +
'<li>' +
'<a href="javascript:;"> Test' +
'<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>' +
'</a>' +
'</li>' +
'</div>'
);
$('.clone_edilen_email').addClass('single-email remove-email');
$('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
$('.clone_edilen_email > .single-email').attr("class", "remove-email");
});
$(document).on('click', '.remove-field-email', function(e) {
$(this).parent('.btn-delete-branch-email').parent('.remove-email').remove();
e.preventDefault();
});
最佳答案
如果我理解正确的话,你想添加<div class="clone_edilen_email">
一次又一次,只要有人点击 .add-extra-email-button
按钮。
一般情况下,调用 element.html('<some_wild_html></some_wild_html>')
将始终覆盖 element
的完整内部内容与 <some_wild_html></some_wild_html>
。此外,如果该元素已经包含一些其他子元素,它们将会丢失。在您给定的代码示例中,我假设您的意图是扩展元素的 html 而不是替换它。
这是我的建议:
$('.add-extra-email-button').click(function() {
var newDiv = $('<div class="clone_edilen_mail"></div>');
newDiv.html('<li><a href="javascript:;"> Test<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i></li>');
$('.clone').append(newDiv); // This is the important clue here!
// afterwards you may insert your residual class stuff
// $('.clone_edilen_email').addClass('single-email remove-email'); <- I would suggest you add these classes already at the begining, where I set the variable "newDiv"
// ...
// $('.single-email').append('<div class="btn-delete-branch-email"><button class="remove-field-email btn btn-danger"><i class="fas fa-trash"></i></button></div>');
// $('.clone_edilen_email > .single-email').attr("class", "remove-email");
});
// .. your other code may follow here ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clone">I am a clone-div!</div>
<button class="add-extra-email-button">Click Me!</button>
希望这对您有帮助!
关于javascript - 如何使用 jQuery 添加重复的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58744293/