js动态追加的元素如何触发事件
一般通过js或者jQuery动态添加的元素标签,通过该元素标签、class、id触发事件,是无效的。如下所示:
<body>
<input type="text" class="ceshi" />
<input type="text" class="ceshi" />
<input type="text" class="ceshi" />
<button onclick="addLine();">点击添加</button> <script>
function addLine() {
var html = "<input type='text' class='ceshi' />";
$('.ceshi:last').after(html);
}
$(".ceshi").on('focus', function () {
$(this).val();
});
</script>
</body>
在既有的<input>后面再通过按钮点击事件,在js中动态添加一个<input>元素,我们通过页面操作可以发现,既有的元素聚焦后输入框内会添加“111”,而js添加的第四个输入框元素,聚焦后并不会触发focus事件。如图所示:
如果想要触发新标签的事件,解决方法有两种:
(1)在标签内添加事件触发方法,例如:<a onclick="test();"></a>
<body>
<input type="text" class="ceshi" onfocus="test(this);"/>
<input type="text" class="ceshi" onfocus="test(this);"/>
<input type="text" class="ceshi" onfocus="test(this);"/>
<button onclick="addLine();">点击添加</button> <script>
function addLine() {
var html = "<input type='text' class='ceshi' onfocus='test(this);'/>";
$('.ceshi:last').after(html);
} function test(param) {
$(param).val();
}
//$(".ceshi").on('focus', function () {
// $(this).val(111);
//});
</script>
</body>
效果如图所示,聚焦到第四个动态添加的输入框时,可触发聚焦事件。
(2)调用jQuery的delegate函数,delegate函数可以根据特定的根元素,把一个或者多个事件注册到指定的元素上,不论这个元素现在是否存在。
<body>
<input type="text" class="ceshi"/>
<input type="text" class="ceshi"/>
<input type="text" class="ceshi"/>
<button onclick="addLine();">点击添加</button> <script>
function addLine() {
var html = "<input type='text' class='ceshi'/>";
$('.ceshi:last').after(html);
}
$(function () {
$("body").delegate("input",
"focus",
function () {
$(this).val();
});
}); //function test(param) {
// $(param).val(111);
//} //$(".ceshi").on('focus', function () {
// $(this).val(111);
//});
</script>
</body>
效果图和方法(1)是一致,不再赘现。
使用此方法时,如果需要多次变更绑定的事件,需要先解除绑定后才能再次绑定事件,解除绑定的方法:
$("body").undelegate();
以上就是两种解决动态添加标签的事件绑定方法啦,感谢阅读!
/******************************我是可爱的分割线**********************************/
js动态追加的元素如何触发事件的更多相关文章
- js动态添加的元素不能绑定事件
动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})
- JS动态创建SVG元素并绑定事件
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.set ...
- js/jq 动态添加的元素不能触发绑定事件解决方案
<!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
- 父元素onmouseover触发事件在父子元素间移动不停触发的问题
今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- jquery 动态创建的元素,绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- 2)JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...
- js 动态添加元素 删除元素逻辑
js 动态添加元素 删除元素逻辑 var obox=document.getElementById("box"); oadd.onclick=function(){ var odi ...
- JS/jQuery点击某元素之外触发事件
JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...
随机推荐
- 手把手从python安装到setuptools、pip工具安装
一.python安装1.基础开发库 apt-get install gccapt-get install openssl libssl-dev 2.安装数据库和开发库 apt-get install ...
- Django - app
1.app目录 migrations:数据库操作的记录(只记录修改表结构的记录); __init__文件:python2中必须填加,python3中无要求,可以不添加: admin:django为我们 ...
- mysql在windows上安装
一.在window上安装mysql MySQL是一个小巧玲珑但功能强大的数据库,目前十分流行.但是官网给出的安装包有两种格式,一个是msi格式,一个是zip格式的.很多人下了zip格式的解压发现没有s ...
- c++ map: 当map的value是void*指针
#include <iostream> #include <map> #include <vector> using namespace std; //key is ...
- java ArrayList去重复值
public static List removeDuplicateWithOrder(List list) { Set set = new HashSet(); List newList = new ...
- auto类型推导
引言 auto : 类型推导. 在使用c++的时候会经常使用, 就像在考虑STL时迭代器类型, 写模板的时候使用auto能少写代码, 也能帮助我们避免一些隐患的细节. auto初始化 使用auto型别 ...
- JS练习:替换式图片自动轮播
代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title ...
- Python-基本语法元素
#TempConvert.py TempStr = input("请输入带有符号的温度值: ") if TempStr[-1] in ['F', 'f']: C = (eval(T ...
- 如何让其他计算机访问我的计算机上mysql数据库?
先判断是不是在同 一个网络之间,你ping 一下它的ip ,看能不能ping通. 这样就有两种情况, 第一种:能ping通,说明你们在同一个网络中,可以直接访问.你只要在你的登录用户中的帐号加上可外部 ...
- DOMContentLoaded 与onload区别以及使用
一.何时触发这两个事件? 1.当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了. 2.当 DOMContentLoaded 事件触发时,仅当DOM加载完 ...