Javascript 在页面加载时单击按钮5次_Javascript_Jquery

Javascript 在页面加载时单击按钮5次

javascript jquery

Javascript 在页面加载时单击按钮5次,javascript,jquery,Javascript,Jquery,我这里有一些非常基本的东西。我有一个按钮，这个想法是点击它，这样它一次动态地添加一个字段。但是当页面加载时，我希望它自动单击按钮，默认情况下放置5个字段，然后如果需要，我仍然可以添加额外的字段这是我到目前为止所拥有的，但我一单击它，它就添加了5个字段。我不想那样 <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"

我这里有一些非常基本的东西。我有一个按钮，这个想法是点击它，这样它一次动态地添加一个字段。但是当页面加载时，我希望它自动单击按钮，默认情况下放置5个字段，然后如果需要，我仍然可以添加额外的字段

这是我到目前为止所拥有的，但我一单击它，它就添加了5个字段。我不想那样

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


提供头衔
点击
$（文档）.ready（函数（）{
用于（变量计数器=0；计数器<5；计数器++）{
$（“#somebutton”）。单击（函数（）{
$（“#容器”）。附加（“”）；
});
}
});

请注意，这是我想要的唯一方式。在页面加载时，自动单击按钮5次以添加5个字段。然后我可以在之后手动单击它以添加第六个、第七个等字段。

请注意jQuery

。单击（函数）

函数只设置一个单击侦听器，而不调用传递给它的函数。但是，此不带参数的函数（即

.click（）

）会触发一个click事件，该事件随后会调用回调函数

在您的情况下，一个简单的解决方案是：

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

$（文档）.ready（函数（）{
var clickFunc=函数（）{
$（“#容器”）。附加（“”）；
}
$（“#somebutton”）。单击（clickFunc）；
用于（变量计数器=0；计数器<5；计数器++）{
clickFunc（）；
}
});

请注意jQuery

。click（function）

函数只设置一个click侦听器，而不调用传递给它的函数。但是，此不带参数的函数（即

.click（）

）会触发一个click事件，该事件随后会调用回调函数

在您的情况下，一个简单的解决方案是：

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

$（文档）.ready（函数（）{
var clickFunc=函数（）{
$（“#容器”）。附加（“”）；
}
$（“#somebutton”）。单击（clickFunc）；
用于（变量计数器=0；计数器<5；计数器++）{
clickFunc（）；
}
});

最简单的方法可能是自动添加模块部分，然后在单击按钮时连接事件处理程序以添加更多模块部分，如下所示：

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

$（函数（）{
//最初添加五个模块
用于（变量计数器=0；计数器<5；计数器++）{
AddModuleToContainer（）；
}
//单击按钮后，添加另一个模块
$（“#somebutton”）。单击（AddModuleToContainer）；
});
函数AddModuleToContainer（）{
$（“#容器”）。附加（“”）；
}

示例

$（函数（）{
//最初添加五个模块
用于（变量计数器=0；计数器<5；计数器++）{
AddModuleToContainer（）；
}
//单击按钮后，添加另一个模块
$（“#somebutton”）。单击（AddModuleToContainer）；
});
函数AddModuleToContainer（）{
$（“#容器”）。附加（“”）；
}


单击

最简单的方法可能是自动添加模块部分，然后在单击按钮时连接事件处理程序以添加更多模块部分，如下所示：

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

$（函数（）{
//最初添加五个模块
用于（变量计数器=0；计数器<5；计数器++）{
AddModuleToContainer（）；
}
//单击按钮后，添加另一个模块
$（“#somebutton”）。单击（AddModuleToContainer）；
});
函数AddModuleToContainer（）{
$（“#容器”）。附加（“”）；
}

示例

$（函数（）{
//最初添加五个模块
用于（变量计数器=0；计数器<5；计数器++）{
AddModuleToContainer（）；
}
//单击按钮后，添加另一个模块
$（“#somebutton”）。单击（AddModuleToContainer）；
});
函数AddModuleToContainer（）{
$（“#容器”）。附加（“”）；
}


单击

只是对代码进行一次小的重组：

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

$（文档）.ready（函数（）{
$（“#somebutton”）。单击（函数（）{
$（“#容器”）。附加（“”）；
});
用于（变量计数器=0；计数器<5；计数器++）{
$（“#somebutton”）。单击（）；
}
});

只是对代码进行了一次小的重组：

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

$（文档）.ready（函数（）{
$（“#somebutton”）。单击（函数（）{
$（“#容器”）。附加（“”）；
});
用于（变量计数器=0；计数器<5；计数器++）{
$（“#somebutton”）。单击（）；
}
});

手动单击按钮是否有任何原因？为什么不插入适当的元素，然后连接事件处理程序，以便在单击按钮时添加其他元素？是否有任何原因导致您手动单击按钮？为什么不插入适当的元素，然后连接事件处理程序，在单击按钮时添加其他元素呢？谢谢您的回答！工作起来很有魅力。我现在更了解如何从这里的不同答案中做我想要的事情。谢谢你的回答！工作起来很有魅力。我现在更了解如何从这里的不同答案中做我想要的事情。谢谢你的回答！工作起来很有魅力。我知道你是怎么做到的。这也是一个很好的方法。谢谢你的回答！工作起来很有魅力。我知道你是怎么做到的。这也是一种行之有效的方法。我现在看到我的组织刚刚退出。我现在从每个人的回答中都明白了。我现在看到我的组织刚刚退出。我现在从大家的回答中明白了。