In jquery,how to append the data(Textbox,dropdown) only once when click the button and also bind the those data with in a div tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test weekpicker</title>
<script src=".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>
In jquery,how to append the data(Textbox,dropdown) only once when click the button and also bind the those data with in a div tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test weekpicker</title>
<script src="http://code.jquery./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>
-
.append()works differently from simply joining strings of text together — it appends/inserts a DOM node. You shouldn't append</div>because that will make no sense. – Terry Commented Dec 18, 2014 at 11:45
4 Answers
Reset to default 6You can use jquery .one() in this situation.
Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
You would also need to change the append logic to append input and select inside div with id container in .append_child div. 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
$(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");
}
);
});
This is one way of doing it... not sure if this is what you want?
Js Fiddle demo
Try this
$(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);
});
});
you have two ways
bind one event to buttonlike this
$('.add_child').one('click',function() {
.......
}
or disable button after the first click
$('.add_child').prop("disabled",true);//add this line in the last of function