动态添加和删除HTML元素和function事件，运用live

最新推荐文章于 2021-06-29 14:13:54 发布
最新推荐文章于 2021-06-29 14:13:54 发布
阅读量2.7k 收藏
点赞数
分类专栏： .net javascript live 文章标签： function html class button div input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kiwill/article/details/7877356
版权
.net 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
javascript
2 篇文章 0 订阅
订阅专栏
live
1 篇文章 0 订阅
订阅专栏

例子如图：当点击Add Hours按钮时将获取select选项的值并添加到上面。当点击remove时则删除对应html元素。

并且，我在这里限制能添加的个数，当超过个数的时候进行报错（没超过的时候不显示报错的div).

页面代码如下：

                <dd>
                    <select name="weekday" id="weekday" class="sel01">
                        <option value="Mon" selected=selected>Mon</option>
                        <option value="Tue">Tue</option>
                        <option value="Wed">Wed</option>
                        <option value="Thu">Thu</option>
                        <option value="Fri">Fri</option>
                        <option value="Sat">Sat</option>
                        <option value="Sun">Sun</option>
                        <option value="Mon-Fri" selected=selected>Mon-Fri</option>
                        <option value="Mon-Sun">Mon-Sun</option>
                        <option value="Sat-Sun">Sat-Sun</option>
                    </select>
                    <select name="hours-start" id="hours-start" class="sel02">
                        <option value="6:00 am">6:00 am</option>
                        <option value="6:30 am">6:30 am</option>
                        <option value="7:00 am">7:00 am</option>
                        <option value="7:30 am">7:30 am</option>
                        <option value="8:00 am" selected=selected>8:00 am</option>
                        <option value="8:30 am">8:30 am</option>
                        <option value="9:00 am">9:00 am</option>
                        <option value="9:30 am">9:30 am</option>
                        <option value="10:00 am">10:00 am</option>
                        <option value="10:30 am">10:30 am</option>
                        <option value="11:00 am">11:00 am</option>
                        <option value="11:30 am">11:30 am</option>
                        <option value="12:00 pm">12:00 pm</option>
                        <option value="12:30 pm">12:30 pm</option>
                        <option value="1:00 pm">1:00 pm</option>
                        <option value="1:30 pm">1:30 pm</option>
                        <option value="2:00 pm">2:00 pm</option>
                        <option value="2:30 pm">2:30 pm</option>
                        <option value="3:00 pm">3:00 pm</option>
                        <option value="15.5">3:30 pm</option>
                        <option value="3:30 pm">4:00 pm</option>
                        <option value="4:30 pm">4:30 pm</option>
                        <option value="5:00 pm">5:00 pm</option>
                        <option value="5:30 pm">5:30 pm</option>
                        <option value="6:00 pm">6:00 pm</option>
                        <option value="6:30 pm">6:30 pm</option>
                        <option value="7:00 pm">7:00 pm</option>
                        <option value="7:30 pm">7:30 pm</option>
                        <option value="8:00 pm">8:00 pm</option>
                        <option value="8:30 pm">8:30 pm</option>
                        <option value="9:00 pm">9:00 pm</option>
                        <option value="9:30 pm">9:30 pm</option>
                        <option value="10:00 pm">10:00 pm</option>
                        <option value="10:30 pm">10:30 pm</option>
                        <option value="11:00 pm">11:00 pm</option>
                        <option value="11:30 pm">11:30 pm</option>
                        <option value="12:00 am">12:00 am</option>
                        <option value="12:30 am">12:30 am</option>
                        <option value="1:00 am">1:00 am</option>
                        <option value="1:30 am">1:30 am</option>
                        <option value="2:00 am">2:00 am</option>
                        <option value="2:30 am">2:30 am</option>
                        <option value="3:00 am">3:00 am</option>
                        <option value="3:30 am">3:30 am</option>
                        <option value="4:00 am">4:00 am</option>
                        <option value="4:30 am">4:30 am</option>
                        <option value="5:00 am">5:00 am</option>
                        <option value="5:30 am">5:30 am</option>
                    </select>
                    <select name="hours-end" id="hours-end" class="sel02">
                        <option value="6:00 am">6:00 am</option>
                        <option value="6:30 am">6:30 am</option>
                        <option value="7:00 am">7:00 am</option>
                        <option value="7:30 am">7:30 am</option>
                        <option value="8:00 am">8:00 am</option>
                        <option value="8:30 am">8:30 am</option>
                        <option value="9:00 am">9:00 am</option>
                        <option value="9:30 am">9:30 am</option>
                        <option value="10:00 am">10:00 am</option>
                        <option value="10:30 am">10:30 am</option>
                        <option value="11:00 am">11:00 am</option>
                        <option value="11:30 am">11:30 am</option>
                        <option value="12:00 pm">12:00 pm</option>
                        <option value="12:30 pm">12:30 pm</option>
                        <option value="1:00 pm">1:00 pm</option>
                        <option value="1:30 pm">1:30 pm</option>
                        <option value="2:00 pm">2:00 pm</option>
                        <option value="2:30 pm">2:30 pm</option>
                        <option value="3:00 pm">3:00 pm</option>
                        <option value="15.5">3:30 pm</option>
                        <option value="3:30 pm">4:00 pm</option>
                        <option value="4:30 pm">4:30 pm</option>
                        <option value="5:00 pm">5:00 pm</option>
                        <option value="5:30 pm" selected=selected>5:30 pm</option>
                        <option value="6:00 pm">6:00 pm</option>
                        <option value="6:30 pm">6:30 pm</option>
                        <option value="7:00 pm">7:00 pm</option>
                        <option value="7:30 pm">7:30 pm</option>
                        <option value="8:00 pm">8:00 pm</option>
                        <option value="8:30 pm">8:30 pm</option>
                        <option value="9:00 pm">9:00 pm</option>
                        <option value="9:30 pm">9:30 pm</option>
                        <option value="10:00 pm">10:00 pm</option>
                        <option value="10:30 pm">10:30 pm</option>
                        <option value="11:00 pm">11:00 pm</option>
                        <option value="11:30 pm">11:30 pm</option>
                        <option value="12:00 am">12:00 am</option>
                        <option value="12:30 am">12:30 am</option>
                        <option value="1:00 am">1:00 am</option>
                        <option value="1:30 am">1:30 am</option>
                        <option value="2:00 am">2:00 am</option>
                        <option value="2:30 am">2:30 am</option>
                        <option value="3:00 am">3:00 am</option>
                        <option value="3:30 am">3:30 am</option>
                        <option value="4:00 am">4:00 am</option>
                        <option value="4:30 am">4:30 am</option>
                        <option value="5:00 am">5:00 am</option>
                        <option value="5:30 am">5:30 am</option>
                    </select><input name="" type="button" id="Addworktime" class="ediBtn02" style="vertical-align: middle" /></dd>
            </dl>
            <div id="HoursError" class="C_Error" style="display: none">
                You can only add 7.<span></span></div>

JS代码如下： 

        var count = 0;
        var countid = 0;

        $("#Addworktime").click(function() {

            var d = document.createElement("dd");
            var a = document.createElement("a");
            var c = document.createElement("input");
            var newworktime = $("#weekday").val() + " " + $("#hours-start").val() + " - " + $("#hours-end").val();
            var newa = "Remove";
            d.innerHTML = newworktime;
            d.id = "hourslist" + count;
            var newid = "hourslist" + count;
            a.innerHTML = newa;
            a.id = countid;
            a.style.cursor = "pointer";
            c.style.display = "none";
            c.value = newworktime;
            c.id = "WorkTime" + count; 
            if(count > 6)
            {
               $("#HoursError").show();
            }
            else
            {
            $("#HoursError").hide();
            if (count > 0) {
                $("#hourslist" + (count - 1)).after(d);
            }
            else {
                $("#hourslistlocal").after(d);
            }
            $("#" + newid).append(a);
            $("#" + countid).addClass("remove");
            $("#header").after(c);
            count++;
            countid++;
            }

        });

        $(".remove").live("click", function() {
            var id = "hourslist" + this.id;
            $("#" + id).hide();
            count--;
            countid--;
            if(count < 7)
            {
               $("#HoursError").hide();
            }
        });

有问题可以问我，互相讨论，

kiwill
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery html动态添加的元素绑定事件详解
01-19
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况： <ul></ul> 假设我们要给ul动态添加的绑定click事件形成如下结果 <li name=apple>apple <li name=pear>pear [removed] function test...
用js动态添加html元素,以及属性的简单实例
12-10
用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2....
html里的function()定义和使用
热门推荐
hy3528的博客
11-30 1万+
function 方法名(参数) { 执行的代码 } 实例： function myFunction(a, b) { return a * b; } 点击调用方法： 1、在点击事件中调用（JQuery） $("button").click(function(){ $("#div1").load(myFunction()); }); 2、在点击事件中调用（JS） <div on...
jquery动态添加元素事件失效问题解决方法
12-09
今天在写JQUERY时遇到个问题：当使用脚本动态添加元素xxx时，但事件$(“.x .y”).click(function)…失效问题。 刚开始网上找到了用live函数，方法如下： 事件绑定：$(“.x .y”).click(function) 需改为： 代码如下:...
Jquery 动态添加元素并添加点击事件实现过程解析
12-30
给动态添加的元素添加js事件，不能直接添加js事件，需要借助on( )方法，给选择器指定的子元素添加事件处理函数，并非选择器本身； 1. 语法 $(selector).on(event,childSelector,data,function) // event _ 需要...
jQuery页面元素动态添加后绑定事件丢失方法,非 live
01-19
代码1: 以此方法绑定的input框事件,在通过add按钮后用jquery绑定的事件 alert就会丢失 <input type=button value=Add name=test_but /> <div id=test_div><input name=test_input/> [removed] $('...
javascript定义函数的方法
wisoper的专栏
07-28 1260
/*javascript定义函数(声明函数)可以有三种方法：正常方法、构造函数、函数直接量。*/ /*1.正常方法 function(param){}*/ function print(msg) { document.write(msg,""); } /*
删除事件（解绑事件）（三种方式）
weixin_45773503的博客
05-08 3873
1. 传统方式删除事件 eventTarget.onclick = null; 2. 方法监听注册方式删除（addEventListener注册的事件删除） eventTarget.removeEventListener(type, listener[, useCapture]) 注意：这里的函数要保存在外部，并且只能写 fn， 不能加括号。 3. attachEvent注册的事件删除 eventTarget.detachEvent(‘onclick’, fn); 看懂栗子（让 div 只能
Vue.js项目中使用jQuery动态添加html并绑定click事件，事件无法触发methods中方法的解决办法
weixin_38974419的博客
03-14 1万+
首先，明确问题点。 在Vue.js项目中，引入jQuery，然后使用 $('#xxxxxxx').append(xxxxxxx)动态添加html语句。动态拼接的html语句中绑定了click事件，当鼠标点击时触发methods中某方法进行处理，但是，发现鼠标点击并没有触发该方法！ 该问题在实际开发过程中遇到过一次，但今天遇到后，忘记了之前是怎么处理的，又浪费...
html 删除事件,HTML DOM removeEventListener() 方法
weixin_39982580的博客
06-05 568
HTML DOM removeEventListener() 方法element.removeEventListener()方法将删除已与element.addEventListener()方法关联的事件处理程序。注意：要删除事件处理程序，用addEventListener()方法指定的函数必须是外部的“命名”函数，如下面的示例(myFunc)。匿名函数，例如“ element .removeEv...
asp中加入html标签,asp中去除内容HTML标签的三个function函数
weixin_36260304的博客
05-30 97
'=============================='功能描述：用正则除去HTML标记'不能保留等以及用户自定义的'==============================FunctionRemoveHTMLTag(fString)DimreSetre=NewRegExpre.IgnoreCase=Truere.Pattern="]*)>"fString...
html 删除事件,html 事件的添加和删除
weixin_33672838的博客
06-05 318
jQuery在jQuery1.7版本中bind() unbind() ,live() die(), on() off() ,delegate()下面我们给li元素添加事件bind()旧版写法: 事件不能适用脚本创建的新元素live() 旧版写法:适用脚本创建的新元素写法，但性能极不好on()新版写法，事件不能适用脚本创建的新元素(接收多个函数绑定)这三种方法都是基于要给添...
javascript函数HTML删除,实现动态删除javascript函数的方法
weixin_29720641的博客
06-29 651
在jsvascript中你知道如何动态删除javascript函数吗？下文内容中小编将介绍实现动态删除javascript函数的方法，感兴趣的小伙伴们跟小编一起去学习学习吧。我现在通过下面：????????????????o=oDOM.createElement("script");????????????????o.text=document.all.checkrule.value;??????...
html 删除事件,HTML DOM removeEventListener() 方法 | 菜鸟教程
weixin_31585653的博客
06-05 553
HTML DOM removeEventListener() 方法实例移除 addEventListener() 方法添加的 "mousemove" 事件:// 向 元素添加事件句柄document.getElementById("myDIV").addEventListener("mousemove",myFunction);// 移除 元素的事件句柄document.getElementB...
JS获取动态添加的元素
weixin_42839080的博客
10-14 1万+
在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: // 1. 在模板引擎里面添加行内事件 // 2. 利用事件的委托获取(常用) // 3. 在ajax的监听响应完成函数后面获取 一 在模板引擎里面添加行内事件 添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素. &lt;!-- 1.准...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值