如何使用jquery动态添加按钮

Sou*_*ika 34 javascript jquery json

我的任务是动态添加按钮到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>
Run Code Online (Sandbox Code Playgroud)

代码在页面加载时在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>
Run Code Online (Sandbox Code Playgroud)

小智 45

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

编辑:

这是两个版本:

版本1:jQuery监听器

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

在这里演示

版本2:使用功能(如您的示例)

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

在这里演示

注意:这个可以使用.appendTo或使用.append.

  • 对不起,我说不清楚 (2认同)

小智 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>
Run Code Online (Sandbox Code Playgroud)

  • 作为可运行的代码片段,这会更有用,这样任何人都可以立即看到它是如何工作的。 (2认同)