一入前端深似海
随笔

jq-动态生成按钮

点击生成按钮

↓↓↓↓↓↓↓↓代码↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态生成按钮</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

</head>
<body>
<header>
    <label for="btn">请输入您要动态生成的数字</label>
    <input type="number" id="btn" >
    <br>
    <input type="button" id='btn1' value="生成按钮" ><input type='button' id='btn2' value="清除画布">
    <div id='scan'>
    </div>
</header>
    
</body>

</html>
View Code
<script>
$(function(){
    $(document).on("click",".btncre",function(){
        alert("您好，我是按钮"+$(this).attr("title"))
    })
    $("#btn1").bind('click',function(){
        var num =$("#btn").attr("value");
        for(var i=1;i<=num;i++){
            $("#scan").append("<input type=button title="+i+" class=btncre id=btncre"+i+" value=按钮"+i+">")
        }
        $("#btn1").attr('disabled',true);
    })
    $("#btn2").bind('click',function(){
        $("#scan").html(' ');
        $("#btn1").attr('disabled',false);
    })
})
</script>

 

 


 
点击按钮会弹出消息框，但是博客园不知道为啥出不来，只能在控制台才能看到alert的内容。sad..

posted on 2016-10-09 22:58  ivan12138  阅读(242)  评论(0)    收藏  举报

导航