一般通过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动态追加的元素如何触发事件的更多相关文章

  1. js动态添加的元素不能绑定事件

    动态生成的元素,使用.on绑定事件,比如$(document).on("click",".divclick",function(){})

  2. JS动态创建SVG元素并绑定事件

    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.set ...

  3. js/jq 动态添加的元素不能触发绑定事件解决方案

    <!-- Copyright 2017-10-27, Jachin QQ: 381558301 Email: 381558301@qq.com 请看看你们的版本并对号入座: jquery1.6版 ...

  4. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  5. 父元素onmouseover触发事件在父子元素间移动不停触发的问题

    今天写了一个侧边栏动态展开收缩的效果 <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  6. jquery 动态创建的元素，绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  7. 2）JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  8. js 动态添加元素 删除元素逻辑

    js 动态添加元素 删除元素逻辑 var obox=document.getElementById("box"); oadd.onclick=function(){ var odi ...

  9. JS/jQuery点击某元素之外触发事件

    JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...

随机推荐

  1. 构建秘钥对验证的SSH体系

    构建秘钥对验证的SSH 体系 首先先要在ssh 客户端以root用户身份创建秘钥对 客户端将创建的公钥文件上传至ssh服务器 服务器将公钥信息导入用户root的公钥数据库文件 客户端以root用户身份 ...

  2. CSS 选择器 知识点

    <html> <head> <style type="text/css"> h1 > strong { /*子元素选择器 只选择自己 的子 ...

  3. for循环中索引值和取值的迷惑

    利用for循环和range从100——10,倒序讲所有的偶数添加到一个新列表中,然后对列表的元素进行筛选,将能被4整除的数留下来. even = []for i in range(100,9,-1): ...

  4. SCI 计算机 数学相关期刊

    数学,电子通信,计算机类 出版地 收录库 刊名 刊期 ISSN 影响因子 中国大陆 SCI CHINESE SCIENCE BULLETIN<科学通报>(英文版) 半月刊 1001-653 ...

  5. 【Codeforces 1B】Spreadsheets

    [链接] 我是链接,点我呀:) [题意] A~Z分别对应了1~26 AA是27依次类推 让你完成双向的转换 [题解] 转换方法说实话特别恶心>_< int转string 得像数位DP一样一 ...

  6. （39.3） Spring Boot Shiro权限管理【从零开始学Spring Boot】

    在学习此小节之前您可能还需要学习: (39.1) Spring Boot Shiro权限管理[从零开始学Spring Boot] http://412887952-qq-com.iteye.com/b ...

  7. [POJ1226]Substrings（后缀数组）

    传送门 给定 n 个字符串,求出现或反转后出现在每个字符串中的最长子串. 算法分析: 这题不同的地方在于要判断是否在反转后的字符串中出现.其实这并没有加大题目的难度. 只需要先将每个字符串都反过来写一 ...

  8. 清北学堂模拟赛d3t2 b

    分析:一道比较让人头疼的数学题. 先考虑怎么让分出来的三角形相似,先不考虑每个三角形的具体边长,设每个三角形的周长为li,则可知必然有一个数g = gcd{li},每一个三角形的周长都是g的倍数,这样 ...

  9. libcloud代码研究（三）——bugs

    Bug 1:对不可迭代类进行迭代(libcloud.storage.driver.cloudfile line. 141-142)      使用libcloud连接自搭建swift服务,自己在服务器 ...

  10. GMT，UTC，DST，CST时间详解

    全球24个时区的划分       相较于两地时间表,可以显示世界各时区时间和地名的世界时区表(World Time),就显得精密与复杂多了,通常世界时区表的表盘上会标示着全球24个时区的城市名称,但究 ...