gpt4 book ai didi

javascript - 如何使用 jquery 只追加一次数据

转载 作者:搜寻专家 更新时间:2023-11-01 04:48:34 26 4
gpt4 key购买 nike

在 jquery 中,如何在单击按钮时仅附加一次数据(文本框、下拉列表)并将这些数据绑定(bind)到 div 标记中。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test weekpicker</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
$('.add_child').click(function() {
$div_open = $('<div id="container">');
$input1 = $('<input type="text" placeholder="Child Name" />');
$input2 = $('<select name="gender"><option value="0">Male</option><option value="1">Female</option></select>');
$div_close = $('</div>');
$('.append_child').append($div_open);
$('.append_child').append($input1);
$('.append_child').append($input2);
$('.append_child').append($div_close);

});
});
</script>
</head>
<body>
<div id="content">
<input type="button" class="add_child" value="Add child">
<div class="child_details">
<div class="append_child"></div>
</div>
</div>
</body>
</html>

最佳答案

你可以使用 jquery .one() 在这种情况下。

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

您还需要更改追加逻辑以追加输入并在 .append_child div 中选择带有 id 容器的 div 内部。像这样的东西:

 $('.add_child').one('click',function() {
$div_open = $('<div id="container"></div>');
$input1 = $('<input type="text" placeholder="Child Name" />');
$input2 = $('<select name="gender"><option value="0">Male</option><option value="1">Female</option></select>');
$('.append_child').append($div_open);
$('.append_child #container').append($input1);
$('.append_child #container').append($input2);
});

Working Demo

关于javascript - 如何使用 jquery 只追加一次数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27545789/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com