All geek questions in one place

How to add data only once using jquery

In jquery, how to add data (text box, drop-down menu) only once when you click the button, and also associate this data with a div tag.

<!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>
+4
source share
4 answers

In this situation, you can use jquery . one () .

Attach a handler to the event for elements. A handler is executed no more than once for each type of event.

You will also need to change the add logic to add input and select inside the div with the id container in the .append_childdiv. soemthing like this:

 $('.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

+6
source

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

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

... , , ?

+3

.

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


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

Source: https://habr.com/ru/post/1568127/

More articles:


All Articles