<!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. E20180424-hm

    thumb n. 拇指; (手套的) 拇指部份; trigger  vt. 引发,触发; 扣…的扳机; 发射或使爆炸(武器或爆炸性弹药);      n. (枪) 扳机; 起动装置,扳柄; 引发其他事 ...

  2. redis 发布订阅实现异步实时发短信

    redis 中发布和订阅可以实现消息的实时传输,这里我只是用它的事件驱动,当客户端发送了消息,服务器端立马可以接收指令处理相应的业务逻辑. 客户端 client.php <?php //发布 $ ...

  3. 《算法竞赛进阶指南》1.6Trie

    142. 前缀统计 给定N个字符串S1,S2-SN,接下来进行M次询问,每次询问给定一个字符串T,求S1-SN中有多少个字符串是T的前缀. 输入字符串的总长度不超过106,仅包含小写字母. 输入格式 ...

  4. tarjan有向图的强连通

    强连通:在有向图G中,两个顶点间至少存在一条路径,则两个点强连通. 强连通图:在有向图中,每两个顶点都强连通,则有向图G就是一个强连通图. 强连通分量:在非强连通图中的极大强连通子图,就称为强连通分量 ...

  5. Hexo瞎折腾系列(3) - 添加GitHub彩带和GitHub Corner

    页面右上角添加GitHub彩带 你可以在这里找到一共12种样式的GitHub彩带,复制其中的超链代码. 在themes\next\layout\_layout.swig目录下找到头部彩带相关的代码: ...

  6. awr 收集时间

    windows 收集 awr 报告,一分钟一个.

  7. MySQL GTID复制

    什么是GTID 什么是GTID呢, 简而言之,就是全局事务ID(global transaction identifier ),最初由google实现,官方MySQL在5.6才加入该功能.GTID是事 ...

  8. 如何修改phpmyadmin上传文件大小限制

    修改php配置文件,php.ini upload_max_filesize = 100M post_max_size = 100M 一般修改这2个就行了,然后重启wampserver 如果还不行,就执 ...

  9. AJPFX关于一维数组的声明与初始化

    一维数组:可以理解为一列多行.类型相同的数据,其中每个数据被称为数组元素:一维数组的声明方式:                type varName[]; 或 type[] varName;(推荐) ...

  10. 洛谷2017 5月月赛R1

    我只想说面对这种难度的题目就是冲着20%的数据暴力... 分数:40+20+36.1+38+0+19 T1 签到题 III 题目背景 pj组选手zzq近日学会了求最大公约数的辗转相除法. 题目描述 类 ...