Question

在jquery中，如何在单击按钮时附加数据（文本框，下拉列表），并将这些数据与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>

Answer 1

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

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

您还需要更改追加逻辑以附加输入，并在.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

Answer 2

    $(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");
        }
    );
});

这是做到这一点的一种方式......不确定这是否是你想要的？

Answer 3

<强> Js Fiddle demo

试试这个

$(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);

        });
    });

Answer 4

你有两种方式

将一个事件绑定到按钮状

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

第一次点击后

或禁用按钮

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

如何使用jquery仅将数据附加一次

4 个答案: