zoukankan      html  css  js  c++  java
  • JS动态添加元素的事件动态绑定

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>选项</title>
    
        <script type="text/javascript" src="http://js.tgimg.cn/jquery/base/jquery.min.js"></script>
    
        <script>
            $(function () {
                //$("input[name=detailUrl]").blur(function () {
                //    console.log(1111);
                //})
                //後面添加的元素無法綁定事件,需預加載
                $("#dfd").on("blur", "input[name=detailUrl]", function () {
                    var url = $(this).val()
                });
    
                $('#modify_bt').on('click', function () {
                    alert($("input[name=detailUrl]").length);
                    var detailUrl = $("input[name=detailUrl]");
                    var arrDetailUrl = [];
                    console.log(arrDetailUrl.join(','));
                    detailUrl.each(function () {
                        arrDetailUrl.push($(this).val());
                    })
    
    
                    console.log(arrDetailUrl.join(','));
                });
                // 添加选项
                $("#opbtn").click(function () {
                    if ($("#opts>li").size() < 6) {// 最多添加6个选项
                        $("#opts").append("<li><input /></li>");
                    } else {// 提示选项个数已经达到最大
                        $("#optips").html("选项个数已经达到最大,不能再添加!");
                        $("#optips").css({ "color": "red" });
                    }
    
                });
    
                $("#opbtn1").click(function () {
                    if ($("input[name=appendDetailUrl]").size() < 6) {// 最多添加6个选项
                        $("#appendDetailUrl").before("<div class='col-sm-4'><input class='form-control' id='detailUrl' name='detailUrl' type='text' placeholder='具体网址' /></div>");
                    } else {// 提示选项个数已经达到最大
                        $("#optips").html("选项个数已经达到最大,不能再添加!");
                        $("#optips").css({ "color": "red" });
                    }
    
                });
    
                // 删除选项
                $("#delbtn").click(function () {
                    if ($("#opts>li").size() <= 0) {
                        $("#optips").html("已经没有选项可以删除了!");
                        $("#optips").css({ "color": "red" });
                    } else {
                        // 删除选项,每次删除最后一个
                        $("#opts>li").last().remove();
                    }
    
                });
    
    
    
            });
    
        </script>
    
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
    
            #dv {
                width: 100px;
                height: 100px;
                background-color: yellow;
                margin: 0px auto 0px;
            }
        </style>
    
    </head>
    <body>
        <div style="margin: 50px;">
            <input id="opbtn" type="button" value="添加选项" />
            <input id="opbtn1" type="button" value="添加选项" />
            <input id="delbtn" type="button" value="删除选项" />
            <input id="wrapbtn" type="button" value="包围DIV" />
            <ol id="opts" type="A"></ol>
    
            <!-- 提示语 -->
            <span id="optips"></span>
        </div>
        <div class="form-group" id="dfd">
            <label class="col-sm-2 control-label" for="detailUrl">具体网址</label>
            <div class="col-sm-4">
                <input class="form-control" id="detailUrl" name="detailUrl" type="text" placeholder="具体网址" />
            </div>
            <input type="button" class="btn" value="追加具体网址" id="appendDetailUrl" />
        </div>
        <div class="form-group">
            <div class="col-sm-offset-8 col-sm-5">
                <input type="button" class="btn" value="保存" id="modify_bt" />
            </div>
        </div>
    
    
    
    </body>
    学习,以记之。如有错漏,欢迎指正

    作者:冯子武
    出处:http://www.cnblogs.com/Zev_Fung/
    本文版权归作者和博客园所有,欢迎转载,转载请标明出处。
    如果博文对您有所收获,请点击下方的 [推荐],谢谢

  • 相关阅读:
    mybatis学习笔记
    markdownPad常用功能示例
    2018-2019-2 《Java程序设计》第3周学习总结
    2018-2019-2 《Java程序设计》第2周学习总结
    2018-2019-2 《Java程序设计》第1周学习总结
    Djnago models 一对多、多对多
    Superset 安装
    lvm 添加分区
    partprobe 重新检测Linux系统分区
    Docker 、Docker Compose 安装
  • 原文地址:https://www.cnblogs.com/Zev_Fung/p/9834828.html
Copyright © 2011-2022 走看看