javascript – 如何使用jquery动态添加按钮 - 代码日志

javascript – 如何使用jquery动态添加按钮

我的任务是将动态添加到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>
你的附加行必须在你的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来完成。

http://stackoverflow.com/questions/18226598/how-to-add-a-button-dynamically-using-jquery

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 如何使用jquery动态添加按钮