logo标签列表

如何使用jQuery动态添加按钮

javascriptjqueryjson
48

我的任务是动态地向 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>

页面加载时附加按钮的代码，但它不起作用

<!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); 需要放在函数内部。 - putvande
请参考此答案：https://dev59.com/Hm025IYBdhLWcg3wHSGn#6205324 - Mahdi Alkhatib
6个回答
56

你需要把添加行放在你的 test() 函数内部。

编辑:

这里有两个版本:

版本1: jQuery 监听器

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

这里是演示

版本2：使用函数（类似于您的示例）

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

点此查看演示

注意：可以使用.appendTo或.append来完成此操作。

2
抱歉，我无法理解您所说的内容。 - Souparnika
你应该在test()函数内部使用你的.append()函数，因为你希望每次点击按钮时都将新输入附加到你的body中，这意味着每次运行函数时都会执行此操作，所以你应该将$("body").append(r);放在函数内部而不是之后。 - Robin Leboeuf
7
动态添加按钮； 

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

2
这将更有用，如果它是一个可运行的片段，这样任何人都可以立即看到它的工作原理。 - CertainPerformance
4

$("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>

Demo: Plunker

我想第一个感谢你让那段代码易读...它的格式真的很糟糕。 - Barrie Reader
我们如何为这个按钮增加价值？ - Souparnika
好的，谢谢。如何在按钮单击insertafter事件中仅“一次”附加此按钮。 - Souparnika
并给我一个在页面加载时向 div 添加按钮的解决方案。在页面加载时向 div 添加按钮的解决方案： - Souparnika
<!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()">插入后面</button> </body> </html> - Souparnika
我使用的上述代码是在页面加载时将按钮附加到div上，但它没有起作用。 - Souparnika
2

试试这个：

<script type="text/javascript">

function test()
{
    if($('input#field').length==0)
    {
       $('<input type="button" id="field"/>').appendTo('body');
     }
}
</script>
按钮应该只附加一次，我们该如何做到这一点？ - Souparnika
@user2236221，请检查更新后的答案，如果带有id字段的输入不存在，则将其附加到正文中，否则不要这样做。 - sangram parmar
我们如何通过函数传递id、value等参数，例如this_app.CreateButton(id, text, primaryIcon, secondaryIcon, className)。 - Souparnika
-2

在这里工作的plunk 链接。

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

$(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>
1
@user2236221 你检查过那个 plunk 吗？在我的端上它运行良好，每次点击按钮都会添加一个新的按钮。你用的是什么浏览器？你尝试过代码了吗？它有没有出现任何错误？ - Nicolae Olariu
请给我一个解决方案，在页面加载时将按钮附加到 div 上。 - Souparnika
@user2236221，我可以问一下你为什么使用w3编辑器吗？无论如何，请查看我的第一个答案，你不需要script.js :) - Nicolae Olariu
请告诉我如何在不更改代码的情况下在此按钮单击时放置警报。 - Souparnika
alert（“我的信息在这里”）; “不改变代码的情况下在此按钮单击上放置警报”的意思是什么？ :-) - Nicolae Olariu
显示剩余4条评论
-2

试试这个

function test()
{
   $("body").append("<input type='button' id='field' />");
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接