如何使用jquery动态添加按钮答案

【问题标题】：How to add a button dynamically using jquery如何使用jquery动态添加按钮
【发布时间】：2013-08-14 08:22:11
【问题描述】：

我的任务是将按钮动态添加到 div.. 这是我遵循的动态添加按钮但它不起作用的代码，请给我一个解决方案

<!DOCTYPE html>
    <html>
    <head>
         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script type="text/javascript">
             function test() {
                var r = "$('<input/>').attr({
                             type: "button",
                             id: "field"
                        })";
             }
             $("body").append(r);
         </script>
    </head>
    <body>
         <button onclick="test()">Insert after</button> 
    </body>
    </html>

页面加载时在 div 上附加按钮但不工作的代码

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function test() {
    var r=$('<input/>').attr({
        type: "button",
        id: "field"

    });
    test().append("#test");    
}
</script>
</head>
<body>
<div id="test"></div>
 <button id="insertAfterBtn" onclick="test()">Insert after</button>
</body>
</html>

【问题讨论】：

$("body").append(r); 需要进入函数。
请参考这个答案stackoverflow.com/a/6205324/3530081

标签： javascript jquery json

【解决方案1】：

您的追加行必须在您的 test() 函数中

编辑：

这里有两个版本：

版本 1：jQuery 监听器

$(function(){
    $('button').on('click',function(){
        var r= $('<input type="button" value="new button"/>');
        $("body").append(r);
    });
});

DEMO HERE

第 2 版：使用函数（如您的示例）

function createInput(){
    var $input = $('<input type="button" value="new button" />');
    $input.appendTo($("body"));
}

DEMO HERE

注意：这可以通过.appendTo 或.append 完成。

【讨论】：

对不起，我听不懂你说什么
您应该在 test() 函数内部使用 .append() 函数，因为您希望每次单击按钮时都将新输入附加到您的身体，这意味着每次运行你的功能，这就是为什么你应该把你的行 $("body").append(r);在你的函数中，而不是把它放在后面。

【解决方案2】：

动态添加动态按钮；

<!DOCTYPE html>
<html>
<head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script type="text/javascript">
        function newButtonClickListener() {
                alert("Hello World");
        }
         function test() {
            var r = $('<input/>').attr({
                         type: "button",
                         id: "field",
                         value: "New Button",
                         onclick: "newButtonClickListener()"
                    });

            $("body").append(r);
         }
     </script>
</head>
<body>
     <button onclick="test()">Insert after</button><br/> 
</body>
</html>

Demo link

【讨论】：

这作为一个可运行的 sn-p 会更有用，这样任何人都可以立即看到它是如何工作的。

【解决方案3】：

$("body").append(r) 语句应该在test 函数内，" 在test 方法中也有错位

function test() {
    var r=$('<input/>').attr({
        type: "button",
        id: "field",
        value: 'new'
    });
    $("body").append(r);    
}

演示：Fiddle

更新
在这种情况下，请尝试更多 jQuery 风格的解决方案

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
          jQuery(function($){
              $('#mybutton').one('click', function(){
                  var r=$('<input/>').attr({
                      type: "button",
                      id: "field",
                      value: 'new'
                  });
                  $("body").append(r);   
              })
          })
        </script>
    </head>
    <body>
        <button id="mybutton">Insert after</button> 
    </body>
</html>

演示：Plunker

【讨论】：

我想成为第一个感谢您使该代码可读的人...它真的格式错误
我们如何为这个按钮增加价值？？
好的，谢谢..如何在按钮单击插入后仅“一次”附加此按钮
并给我一个解决方案，在页面加载时在 div 上附加按钮。

【解决方案4】：

试试这个：

<script type="text/javascript">

function test()
{
    if($('input#field').length==0)
    {
       $('<input type="button" id="field"/>').appendTo('body');
     }
}
</script>

【讨论】：

按钮应该只附加一次我们如何做到这一点
@user2236221 检查更新的答案，如果不存在带有 id 字段的输入，而不是将其附加到正文，否则不......
我们如何通过 this_app.CreateButton (id, text, primaryIcon, secondaryIcon, className) 等函数传递 id、value 等；

【解决方案5】：

试试这个

function test()
{
   $("body").append("<input type='button' id='field' />");
}

【讨论】：

【解决方案6】：

工作狂here.

要仅添加一次新输入，请使用以下代码：

$(document).ready(function()
{
  $("#insertAfterBtn").one("click", function(e)
  {
    var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" });

    $("body").append(r);
  });
});

[...这里的源代码被剥离...]

<body>
    <button id="insertAfterBtn">Insert after</button>
</body>

[...这里的源代码被剥离...]

要使其在 w3 编辑器中工作，请将以下代码复制/粘贴到 w3 编辑器内的“源代码”部分，然后点击“提交代码”：

<!DOCTYPE html>
<html>

  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  </head>

  <body>
    <button id="insertAfterBtn">Insert only one button after</button>
    <div class="myClass"></div>
    <div id="myId"></div>
  </body>

<script type="text/javascript">
$(document).ready(function()
{
  // when dom is ready, call this method to add an input to 'body' tag.
  addInputTo($("body"));

  // when dom is ready, call this method to add an input to a div with class=myClass
  addInputTo($(".myClass"));

  // when dom is ready, call this method to add an input to a div with id=myId
  addInputTo($("#myId"));

  $("#insertAfterBtn").one("click", function(e)
  {
    var r = $('<input/>', { type: "button", id: "field", value: "I'm a button" });

    $("body").append(r);
  });
});

function addInputTo(container)
{
  var inputToAdd = $("<input/>", { type: "button", id: "field", value: "I was added on page load" });

  container.append(inputToAdd);
}
</script>

</html>

【讨论】：

@user2236221 你检查过那个笨蛋吗？它在我这边工作正常，每次点击按钮都会添加一个新按钮。你使用的是什么浏览器？您是否尝试过代码并给出了任何错误？
请给我一个在页面加载时在 div 上附加按钮的解决方案
@user2236221 我能问你为什么使用 w3 编辑器吗？无论如何，检查我的第一个答案，你不需要 script.js :)
你的第一个答案工作正常，但这段代码不起作用，你能给我 script.js 文件.. 该文件中包含什么
请告诉我如何在不更改代码的情况下在单击此按钮时发出警报