<!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>

JS动态添加元素的事件动态绑定的更多相关文章

  1. js动态添加元素绑定事件问题

    //开始是直接普通写的绑定click事件 其中li a i 中的i是动态添加的 结果是触发不了..$("li a i").click(function () { $(this).m ...

  2. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  3. js 动态添加元素（div、li、img等）及设置属性

    把一串 html 标签赋给一个 javascript 变量,除属性的值要用转义的双引号外,某些时候字符串还很长,显得有些复杂.如果用 js 动态添加元素,就不会有那么复杂的字符串出现,代码阅读性强一点 ...

  4. js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助   有些时候需要动态加载javascript事件的一些方法往往我们需要在 JS 中动态添 ...

  5. jqery 动态添加元素 绑定事件

    jQuery动态添加元素: var url = "...";//服务地址 $.ajax({ type: 'post', url: url, data:{fireId:fireId} ...

  6. js 动态添加元素 删除元素逻辑

    js 动态添加元素 删除元素逻辑 var obox=document.getElementById("box"); oadd.onclick=function(){ var odi ...

  7. SVG 动态添加元素与事件

    SVG文件是由各个元素组成.元素由标签定义,而标签格式即html的元素定义格式.但是载入一个SVG文件,却无法通过常规的js获取对象方式来获取到SVG中定义的元素,更无法通过这种方式来动态添加SVG元 ...

  8. jquery html 动态添加元素绑定事件

    由于实际的需要,有时需要往网页中动态的插入HTML内容,并在插入的节点中绑定事件处理函数.我们知道,用Javascript向HTML文档中 插入内容,有两种方法, 一种是在写HTML代码写入JS,然后 ...

  9. jQuery1.9为动态添加元素绑定事件以及获取和操作checkbox的选择属性

    1.jQuery为动态添加的元素绑定事件:在1.7之后,添加了live()方法,1.9后又被移除,1.9中可用on()方法: $(function() { $('.btn').on('click',  ...

随机推荐

  1. 【WIP】swift3的timer的用法

    创建: 2017/10/14   更新: 2017/10/14 标题加上[WIP],补充创建时间     回家再写

  2. 骨骼蒙皮动画(Skinned Mesh)的原理解析（二）

    http://blog.csdn.net/jimoshuicao/article/details/9283071 2)蒙皮信息和蒙皮过程 2-1)Skin info的定义 上文曾讨论过,Skinned ...

  3. python __builtins__ bool类 （6）

    6.'bool',  函数用于将给定参数转换为布尔类型,如果没有参数,返回 False. class bool(int) # 继承于int类型 | bool(x) -> bool # 创建boo ...

  4. 浅谈欧拉函数 By cellur925

    1.某神犇Blog 学了三遍的 欧拉函数φ--DEADFISH7 2.我要做一些补充o(*￣▽￣*)o $φ(1)=1$: 公式有两种形式,一种有太多除法,实际可能会慢些.通用 对于任意$n$> ...

  5. 安装kibana

    下载kibana5.1.1或者5.1.2版本的deb包,然后用dpkg命令安装 安装后启动位置在 /usr/share/kibana/bin中,在该目录下运行 ./kibana 即可启动 启动前应该先 ...

  6. parse.urljoin

    parse.urljoin(former,later): 用former的域名拼接later的路径,如果later有域名,则进行忽略

  7. 关于使用IQKeyBoardManager键盘还是被遮挡的问题解决方案

    今天在做一个登录界面的时候发现使用了IQKeyBoardManager键盘还是被遮挡,解决方案如下 解决方案一:在所有视图的最外层添加一个UIView作为容器即可,但在有导航栏的情况下导航栏会跟着向上 ...

  8. 多线程 线程间通信 wait,notify

    1. 方法wait锁释放,notify()锁不释放

  9. 跟我一起玩Win32开发（7）：多边形窗口

    通常情况下,窗口都是一个矩形,不过,调用下面这个函数,可以自定义窗口的形状. int SetWindowRgn( __in  HWND hWnd, __in  HRGN hRgn, __in  BOO ...

  10. background-size属性

    background-size:属性有 auto:length :百分比 length 如:10px 20px 固定的 或者是写成一个 ,10px  另外一个就默认为 auto; 写成百分比的形式 是 ...