Jquery: append 在 elements before when clicked 中创建多个新元素
Jquery: append creates multiple new elements in elements before when clicked
我正在创建一个个人使用网站,我想在其中添加“模块”或可以添加 link 的组。
我面临的问题是当我添加一个组并开始添加 link 时,一切正常。但是,当我添加另一组时,之后在第一组中添加一个 link,它将添加两个 link 而不是一个(在第一组中),但在第二组中添加一个 link小组加一。
无论我有多少组,这都会扩大规模,最后一个组总是按预期工作,但之前的组会向其下方的许多组添加额外的 links。
我真的很感激任何帮助理解这个问题,因为我已经在这个问题上做了太长时间而没有任何进展。
const moduleHTML =
'<div class="module"> \
<div class="module-head"> \
<img class="module-head-logo" src=""> \
<h2 class="module-head-name">Group name</h2> \
<img class="module-head-cancel" src="assets/close_white_24dp.svg"> \
<img class="module-head-delete" src="assets/delete_white_24dp.svg"> \
<img class="module-head-save" src="assets/save_white_24dp.svg"> \
</div> \
<div class="module-body"> \
<p class="module-body-container-edit-add">Add new link...</p> \
</div> \
</div>';
const linkHTML =
'<div class="module-body-container-outer"> \
<div class="module-body-container"> \
<div class="module-body-container-edit-name"> \
<img class="module-body-container-image" src=""> \
<input type="text" maxlength="16" placeholder="Name..."> \
<img class="module-body-container-edit-delete" src="assets/delete_white_24dp.svg"> \
</div> \
<div class="module-body-container-edit-link"> \
<img class="module-body-container-image" src="assets/link_white_24dp.svg"> \
<input type="url" placeholder="Link..."> \
</div> \
</div> \
</div>';
$(document).ready(function() {
console.log("ready!");
$('.module-add').on('click', function() {
console.log('add module');
$("#module-container").append(moduleHTML);
$('.module-head-delete').on('click', function() {
console.log('delete module');
$(this).closest(".module").remove();
});
$(".module-body-container-edit-add").click(function() {
console.log("add link");
$(this).closest(".module-body").append(linkHTML);
$('.module-body-container-edit-delete').on('click', function() {
console.log('delete link');
$(this).closest(".module-body-container-outer").remove();
});
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Daily Links</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="jquery-3.6.0.js">
</script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<header class="header-container">
<h1>Daily Links</h1>
<input type="submit" class="module-add" value="Add module">
</header>
<div id="module-container">
</div>
</body>
</html>
每次你点击Add module
按钮你执行
$('.module-body-container-edit-delete').on('click', function...);
这会向所有先前创建的 Add new link
按钮添加另一个点击处理程序,因此它们会多次执行处理程序函数,从而创建多个链接。
使用事件委托而不是每次都添加处理程序。参见 Event binding on dynamically created elements?
$(document).ready(function() {
console.log("ready!");
$('.module-add').on('click', function() {
console.log('add module');
$("#module-container").append(moduleHTML);
$('.module-head-delete').on('click', function() {
console.log('delete module');
$(this).closest(".module").remove();
});
});
$("#module-container").on("click", ".module-body-container-edit-add", function() {
console.log("add link");
$(this).closest(".module-body").append(linkHTML);
});
$('#module-container').on('click', '.module-body-container-edit-delete', function() {
console.log('delete link');
$(this).closest(".module-body-container-outer").remove();
});
});
const moduleHTML =
'<div class="module"> \
<div class="module-head"> \
<img class="module-head-logo" src=""> \
<h2 class="module-head-name">Group name</h2> \
<img class="module-head-cancel" src="assets/close_white_24dp.svg"> \
<img class="module-head-delete" src="assets/delete_white_24dp.svg"> \
<img class="module-head-save" src="assets/save_white_24dp.svg"> \
</div> \
<div class="module-body"> \
<p class="module-body-container-edit-add">Add new link...</p> \
</div> \
</div>';
const linkHTML =
'<div class="module-body-container-outer"> \
<div class="module-body-container"> \
<div class="module-body-container-edit-name"> \
<img class="module-body-container-image" src=""> \
<input type="text" maxlength="16" placeholder="Name..."> \
<img class="module-body-container-edit-delete" src="assets/delete_white_24dp.svg"> \
</div> \
<div class="module-body-container-edit-link"> \
<img class="module-body-container-image" src="assets/link_white_24dp.svg"> \
<input type="url" placeholder="Link..."> \
</div> \
</div> \
</div>';
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Daily Links</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="jquery-3.6.0.js">
</script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<header class="header-container">
<h1>Daily Links</h1>
<input type="submit" class="module-add" value="Add module">
</header>
<div id="module-container">
</div>
</body>
</html>
我正在创建一个个人使用网站,我想在其中添加“模块”或可以添加 link 的组。
我面临的问题是当我添加一个组并开始添加 link 时,一切正常。但是,当我添加另一组时,之后在第一组中添加一个 link,它将添加两个 link 而不是一个(在第一组中),但在第二组中添加一个 link小组加一。
无论我有多少组,这都会扩大规模,最后一个组总是按预期工作,但之前的组会向其下方的许多组添加额外的 links。
我真的很感激任何帮助理解这个问题,因为我已经在这个问题上做了太长时间而没有任何进展。
const moduleHTML =
'<div class="module"> \
<div class="module-head"> \
<img class="module-head-logo" src=""> \
<h2 class="module-head-name">Group name</h2> \
<img class="module-head-cancel" src="assets/close_white_24dp.svg"> \
<img class="module-head-delete" src="assets/delete_white_24dp.svg"> \
<img class="module-head-save" src="assets/save_white_24dp.svg"> \
</div> \
<div class="module-body"> \
<p class="module-body-container-edit-add">Add new link...</p> \
</div> \
</div>';
const linkHTML =
'<div class="module-body-container-outer"> \
<div class="module-body-container"> \
<div class="module-body-container-edit-name"> \
<img class="module-body-container-image" src=""> \
<input type="text" maxlength="16" placeholder="Name..."> \
<img class="module-body-container-edit-delete" src="assets/delete_white_24dp.svg"> \
</div> \
<div class="module-body-container-edit-link"> \
<img class="module-body-container-image" src="assets/link_white_24dp.svg"> \
<input type="url" placeholder="Link..."> \
</div> \
</div> \
</div>';
$(document).ready(function() {
console.log("ready!");
$('.module-add').on('click', function() {
console.log('add module');
$("#module-container").append(moduleHTML);
$('.module-head-delete').on('click', function() {
console.log('delete module');
$(this).closest(".module").remove();
});
$(".module-body-container-edit-add").click(function() {
console.log("add link");
$(this).closest(".module-body").append(linkHTML);
$('.module-body-container-edit-delete').on('click', function() {
console.log('delete link');
$(this).closest(".module-body-container-outer").remove();
});
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Daily Links</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="jquery-3.6.0.js">
</script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<header class="header-container">
<h1>Daily Links</h1>
<input type="submit" class="module-add" value="Add module">
</header>
<div id="module-container">
</div>
</body>
</html>
每次你点击Add module
按钮你执行
$('.module-body-container-edit-delete').on('click', function...);
这会向所有先前创建的 Add new link
按钮添加另一个点击处理程序,因此它们会多次执行处理程序函数,从而创建多个链接。
使用事件委托而不是每次都添加处理程序。参见 Event binding on dynamically created elements?
$(document).ready(function() {
console.log("ready!");
$('.module-add').on('click', function() {
console.log('add module');
$("#module-container").append(moduleHTML);
$('.module-head-delete').on('click', function() {
console.log('delete module');
$(this).closest(".module").remove();
});
});
$("#module-container").on("click", ".module-body-container-edit-add", function() {
console.log("add link");
$(this).closest(".module-body").append(linkHTML);
});
$('#module-container').on('click', '.module-body-container-edit-delete', function() {
console.log('delete link');
$(this).closest(".module-body-container-outer").remove();
});
});
const moduleHTML =
'<div class="module"> \
<div class="module-head"> \
<img class="module-head-logo" src=""> \
<h2 class="module-head-name">Group name</h2> \
<img class="module-head-cancel" src="assets/close_white_24dp.svg"> \
<img class="module-head-delete" src="assets/delete_white_24dp.svg"> \
<img class="module-head-save" src="assets/save_white_24dp.svg"> \
</div> \
<div class="module-body"> \
<p class="module-body-container-edit-add">Add new link...</p> \
</div> \
</div>';
const linkHTML =
'<div class="module-body-container-outer"> \
<div class="module-body-container"> \
<div class="module-body-container-edit-name"> \
<img class="module-body-container-image" src=""> \
<input type="text" maxlength="16" placeholder="Name..."> \
<img class="module-body-container-edit-delete" src="assets/delete_white_24dp.svg"> \
</div> \
<div class="module-body-container-edit-link"> \
<img class="module-body-container-image" src="assets/link_white_24dp.svg"> \
<input type="url" placeholder="Link..."> \
</div> \
</div> \
</div>';
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Daily Links</title>
<link rel="stylesheet" href="styles.css">
<script type="text/javascript" src="jquery-3.6.0.js">
</script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<header class="header-container">
<h1>Daily Links</h1>
<input type="submit" class="module-add" value="Add module">
</header>
<div id="module-container">
</div>
</body>
</html>