首页 > 代码库 > jq-动态生成按钮

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=http://www.mamicode.com/按钮"+i+">")        }        $("#btn1").attr(‘disabled‘,true);    })    $("#btn2").bind(‘click‘,function(){        $("#scan").html(‘ ‘);        $("#btn1").attr(‘disabled‘,false);    })})</script>

 

 


 
点击按钮会弹出消息框,但是博客园不知道为啥出不来,只能在控制台才能看到alert的内容。sad..
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script type="text/javascript">// ") } $("#btn1").attr(‘disabled‘,true); }) $("#btn2").bind(‘click‘,function(){ $("#scan").html(‘ ‘); $("#btn1").attr(‘disabled‘,false); })})// ]]></script>

jq-动态生成按钮