<!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. docker 远程连接设置

    Docker为C/S架构,服务端为docker daemon,客户端为docker.service. 默认不会监听任何端口,只能在本地使用docker客户端或者使用Docker API进行操作.要支持 ...

  2. Go语言中的代码重用 - 继承还是组合？

    故事要从我在一个项目中,想要假装的专业一点而遇到的一个陷阱说起. 代码重用 在这个项目中,我们已经有了类似如下的代码: package main import ( "fmt" ) ...

  3. POJ1236【图的前连通（缩点）】

    题意: 1.初始至少需要向多少个学校发放软件,使得网络内所有的学校最终都能得到软件. 2.至少需要添加几条传输线路(边),使任意向一个学校发放软件后,经过若干次传送,网络内所有的学校最终都能得到软件. ...

  4. js中的预解释

    在js中,带var 和function关键字的需要预解释: 那什么是预解释?就是在js代码执行之前,先申明好带有var 关键字和带有function关键字的变量,在内存里先安排好.但是带有var关键字 ...

  5. Python中lambda表达式的应用

    lambda表达式 Python中定义了一个匿名函数叫做lambda表达式,个人理解实现的作用就是代替一些简单的函数,使得代码看上去更简洁并且可读性高.举个例子,我们有一个元组列表[(‘a’,1),( ...

  6. hive的使用 + hive的常用语法

    本博文的主要内容有: .hive的常用语法 .内部表 .外部表 .内部表,被drop掉,会发生什么? .外部表,被drop掉,会发生什么? .内部表和外部表的,保存的路径在哪? .用于创建一些临时表存 ...

  7. zabbix网络发现主机

    1 功能介绍 默认情况下,当我在主机上安装agent,然后要在server上手动添加主机并连接到模板,加入一个主机组. 如果有很多主机,并且经常变动,手动操作就很麻烦. 网络发现就是主机上安装了age ...

  8. Educational Codeforces Round 24 B

    n children are standing in a circle and playing a game. Children's numbers in clockwise order form a ...

  9. Xor-sequences CodeForces - 691E || 矩阵快速幂

    Xor-sequences CodeForces - 691E 题意:在有n个数的数列中选k个数(可以重复选,可以不按顺序)形成一个数列,使得任意相邻两个数异或的结果转换成二进制后其中1的个数是三的倍 ...

  10. Linux修改文件的权限,拥有者,所属组

    修改文件的权限,拥有者,所属组 1.设置文件的权限(chmod) ①方式一(建议使用这种方式) 命名:chomd 755 文件名 ②方式二 命名:chomd -R +x 文件名 2.设置文件的拥有者( ...