Click a button 5 times on page load
Question
I have something really basics here. I have a button, the idea is to click it so that it adds one field at a time dynamically. But when the page load, I want it to click the button automatically to place 5 fields by default and then afterwards I should still be able to add extra field if necessary.
This is what I so far have, but it adds 5 fields as soon as I click it. I don't want that.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
</head>
<body>
<div id="container"></div>
<button id="somebutton">Click</button>
<script type="text/javascript">
$(document).ready(function() {
for (var counter = 0; counter < 5; counter++) {
$("#somebutton").click(function () {
$("#container").append('<div class="module_item"><input type="text" /></div>');
});
}
});
</script>
</body>
</html>
Please note that this is the only way how I want it. On page load, button gets clicked automatically 5 times to add 5 fields. Then I can manually click it afterwards to add a sixth, seventh, and so on field.
3 answers
solution1
2 ACCPTED 2016-08-15 19:16:16
Just a minor reorganization to your code:
$(document).ready(function() {
$("#somebutton").click(function () {
$("#container").append('<div class="module_item"><input type="text" /></div>');
});
for (var counter = 0; counter < 5; counter++) {
$("#somebutton").click();
}
});
solution2
1 2016-08-15 19:13:45
Please note that jQuery .click(function) function only sets a click listener, not calling the function being passed to. However, this function without parameter (ie .click() ) fires a click event which subsequently calls the callback function.
In your case, a simple solution would be:
$(document).ready(function() {
var clickFunc = function () {
$("#container").append('<div class="module_item"><input type="text" /></div>');
}
$("#somebutton").click(clickFunc);
for (var counter = 0; counter < 5; counter++) {
clickFunc();
}
});
solution3
1 2016-08-15 19:14:58
The easiest approach might be to simply add your module sections automatically and then wire up an event handler to add more of them as the button is clicked as seen below :
$(function() {
// Add your five modules initially
for (var counter = 0; counter < 5; counter++) {
AddModuleToContainer();
}
// When your button is clicked, add another module
$("#somebutton").click(AddModuleToContainer);
});
function AddModuleToContainer(){
$("#container").append('<div class="module_item"><input type="text" /></div>');
}
Example
$(function() { // Add your five modules initially for (var counter = 0; counter < 5; counter++) { AddModuleToContainer(); } // When your button is clicked, add another module $("#somebutton").click(AddModuleToContainer); }); function AddModuleToContainer(){ $("#container").append('<div class="module_item"><input type="text" /></div>'); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"></div> <button id="somebutton">Click</button>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.