jquery添加未来元素时，其绑定事件不起作用解决办法

最新推荐文章于 2024-03-13 10:12:17 发布

weixin_34126215

最新推荐文章于 2024-03-13 10:12:17 发布

阅读量343

点赞数 1

文章标签： javascript ViewUI

本文探讨了在使用jQuery时，如何正确地为动态添加的DOM元素绑定事件监听器。重点介绍了delegate方法的问题，并给出了使用.on()方法的有效解决方案。

delegate说起对未来元素是其作用的，于是写下代码：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>知几 - 教师端</title>
    <meta name="description" content="">
    <link rel="apple-touch-icon" href="http://cdn.dev.tiplus.cn/client-teacher/apple-touch-icon.png">
    <script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>

<p class="xxx">click</p>
<div id="a"></div>
<li class="add_reason"><span>xx</span></li>

<script type="text/javascript">
$(".xxx").click(function(){
    $("#a").append('<li class="add_reason"><span style="display:block;">xx</span></li>');
})

$(".add_reason").delegate("span", "click",function(){
    alert("ddd");
});
</script>

</body>
</html>

其实不然，对与通过点击xxx元素新加的html，根本没有作用。

错误：页面出现动态添加元素时，添加元素的事件用普通的方法，无法响应。

原因：普通添加的事件，只是在document.ready时绑定的已有元素事件，所以动态添加的元素，在document.ready时不存在，所以也无法绑定元素事件，无法对事件进行响应。

这时候，需要用到上面的三个绑定方法；这三个方法只所以成功，是因为这三个方法是绑定到document上，如果元素发生变化，也都是从document开始找，动态添加的元素也能被重新查找时所发现，所以事件能够响应。换成如下代码，成功执行：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>知几 - 教师端</title>
    <meta name="description" content="">
    <link rel="apple-touch-icon" href="http://cdn.dev.tiplus.cn/client-teacher/apple-touch-icon.png">
    <script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>

<p class="xxx">click</p>
<div id="a"></div>
<li class="add_reason"><span>xx</span></li>



<script type="text/javascript">
$(".xxx").click(function(){
    $("#a").append('<li class="add_reason"><span style="display:block;">xx</span></li>');
})

$(document).on('click', '.add_reason',function() { 
    alert("2");
});
</script>

</body>
</html>