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>

 

posted @ 2018-10-23 09:37  阿水zev  阅读(915)  评论(0)  编辑  收藏  举报