<!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. ORACLE PL/SQL 实例精解之第四章 条件控制：if 语句

    4.1 IF 语句 IF语句两种形式:IF-THEN IF-THEN-ELSE 使用IF-THEN,可以指定需要执行的一组动作. IF-THEN-ELSE语句指定两组动作 1. IF-THEN TRU ...

  2. Swift里计数相关的小细节

    Swift里对于字符串这些引入了index型,相对其他语言而言字符操作更安全了,但是问题就是一不注意搞错范围就会有各种离奇的bug. 在讲主题前,先说个小细节. Swift里非常严密的定义了一大堆字符 ...

  3. 百度之星资格赛 1003 度度熊与邪恶大魔王（二维dp）

    分析 挺好的一道题 dp[i][j]表示打败i颗血j防御力的怪兽需要的最少宝石数 然后就好了,复杂度\(O(n+m*1000*10)\) #include <bits/stdc++.h> ...

  4. Educational Codeforces Round 12 A. Buses Between Cities

    题意: 从A到B的汽车每隔 a 分钟发车一次,从A到B要ta分钟. 从B到A汽车每隔b分钟发车一次,从B到A要ta分钟. Simion从A出发,问他在A->B的途中共遇到了多少辆车. 汽车都是从 ...

  5. python 通过setup.py安装和卸载python软件包

    安装:sudo python setup.py install 卸载:sudo python setup.py install --record log sudo cat log | sudo xar ...

  6. poj 3648 Wedding【2-SAT+tarjan+拓扑】

    看错题*n,注意是输出新娘这边的-- 按2-SAT规则连互斥的边,然后注意连一条(1,1+n)表示新娘必选 然后输出color[belong[i]]==color[belong[1+n(新娘)]]的点 ...

  7. Luogu P1663 山【二分答案/实数域】By cellur925

    题目传送门 现在要在山上的某个部位装一盏灯,使得这座山的任何一个部位都能够被看到. 给出最小的y坐标,如图的+号处就是y坐标最小的安装灯的地方. 这个题嘛...今年省选前学姐来我们(破烂)的机房串门的 ...

  8. CSS3向上移动的效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. AtCoder - 2153 An Ordinary Game list模拟 || 博弈

    http://abc048.contest.atcoder.jp/tasks/arc064_b?lang=en 在vj里面用list模拟水过去了,然后感觉vj不靠谱,上atcoder交,果然tle 我 ...

  10. 取URL中各个参数的值

    取参数值的方法有很多,个人记录一个方便好用的 //查询参数(参数名)function GetQueryString(name) {    var reg = new RegExp("(^|& ...