如何使用jQuery仅添加一次数据？

Question

如何使用jQuery仅添加一次数据？

4

在jquery中，如何在点击按钮时只添加一次数据（文本框、下拉框），并将这些数据绑定到一个

标签中。

<!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>

- Jesivalar

.append() 的工作方式与简单地将文本字符串连接在一起不同——它会附加/插入一个 DOM 节点。您不应该附加 </div>，因为那没有任何意义。 - Terry

4个回答

4

    $(function() {
    $('.add_child').click(
        function() {
            html =  '<div class="container">'+
                    '  <input type="text" placeholder="Child Name" />'+
                    '  <select name="gender">'+
                    '    <option value="0">Male</option>'+
                    '    <option value="1">Female</option>'+
                    '  </select>'+
                    '</div>';
            $('.append_child').append(html);
            $(this).unbind("click");
        }
    );
});

这是其中一种方法......不确定这是否符合您的要求？

- dumle

3

Js Fiddle演示

试试这个

$(function() {
        $('.add_child').one('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').find("#container").append($input1);
            $('.append_child').find("#container").append($input2);
            $('.append_child').find("#container").append($div_close);

        });
    });

- SimarjeetSingh Panghlia

2

你有两种方式

像这样将一个事件绑定到按钮

$('.add_child').one('click',function() {
.......
}

在第一次点击后禁用按钮。

 $('.add_child').prop("disabled",true);//add this line in the last of function

- moroccan_dev

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Milind Anantwar · Accepted Answer

在这种情况下，您可以使用jQuery的.one()。

为元素的事件附加一个处理程序。每个元素每个事件类型最多执行一次该处理程序。

您还需要更改追加逻辑，将输入和选择追加到id为container的div内的.append_child 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