<!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. CodeForces 719A Vitya in the Countryside (水题)

    题意:根据题目,给定一些数字,让你判断是上升还是下降. 析:注意只有0,15时特别注意一下,然后就是14 15 1 0注意一下就可以了. 代码如下: #pragma comment(linker, & ...

  2. [WPF自定义控件库] 自定义控件的代码如何与ControlTemplate交互

    1. 前言 WPF有一个灵活的UI框架,用户可以轻松地使用代码控制控件的外观.例设我需要一个控件在鼠标进入的时候背景变成蓝色,我可以用下面这段代码实现: protected override void ...

  3. k-means 算法介绍

    概述 聚类属于机器学习的无监督学习,在数据中发现数据对象之间的关系,将数据进行分组,组内的相似性越大,组间的差别越大,则聚类效果越好.它跟分类的最主要区别就在于有没有“标签”.比如说我们有一组数据,数 ...

  4. Java Web中实现设置多个域名跨域访问

    添加以下设置可允许所有域名跨域访问: response.setHeader("Access-Control-Allow-Origin","*"); 但在实际应用 ...

  5. threading多线程模块

    1 基本实现 Thread(target=函数名,args=(以元组形式传递的实参,要加",")) th = threading.Thread(target=run,args=(i ...

  6. Codeforces Round #418 (Div. 2) A

    Description A few years ago, Hitagi encountered a giant crab, who stole the whole of her body weight ...

  7. 洛谷 P3375 【模板】KMP字符串匹配 || HDU 1686 Oulipo || kmp

    HDU-1686 P3375 kmp介绍: http://www.matrix67.com/blog/archives/115 http://www.cnblogs.com/SYCstudio/p/7 ...

  8. HDU 1221 Rectangle and Circle 考虑很多情况，good题

    http://acm.hdu.edu.cn/showproblem.php?pid=1221 114 92 31 95 13 96 3 这题只需要判断圆和矩形是否相交,然后在里面是不算相交的. 那么就 ...

  9. MySQL5.5升级到5.6

    5.6的新的特性 .支持GTIDs,Failover.多线程复制. 新增binlog_row_image只记录row格式下所用字段的修改(而不是像以前一样记录全部列),节省空间等资源: master. ...

  10. Python 3.6.5安装过程中小错误zipimport.ZipImportError: can't decompress data; zlib not available

    执行 :yum install -y zlib*之后,就好了.该安装错误是在CentOS7.4中遇到的.