使用datatable时，第一页行元素的点击事件好用，第二页点击事件不好用；为未来标签绑定事件

最新推荐文章于 2020-04-01 14:05:40 发布

cxy_12345

最新推荐文章于 2020-04-01 14:05:40 发布

阅读量918

点赞数

分类专栏：绑定事件未来标签文章标签：未来标签绑定事件 live on delegate

本文链接：https://blog.csdn.net/cxy_12345/article/details/81197131

版权

绑定事件同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

未来标签

1 篇文章 0 订阅

订阅专栏

问题描述：使用datatable时，第一页行元素的点击事件好用，第二页的点击事件不好用，或者说页面加载后通过事件或ajax等新生成的标签对之前定义的该类标签的时间不好用，不能触发。

问题原因：bind 和click只能为页面已经加载好的元素绑定事件，不能为未来元素绑定事件，翻页之后，第二页的数据是动态生成的，相当于未来元素，所以时间没有绑定上。

解决方法：不用bind或click，使用未来元素绑定事件的方法。下面代码为各种为标签绑定事件的方法。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>未来元素的绑定事件练习</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- <script src="js/jquery-1.10.2.js"></script> -->
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        $(function(){
            $("#newP").click(function(){
              $("#divId").append("<p>这是通过点击按钮新生成的p元素</p>")
            })
            $("p").click(function(){
                alert("通过click点击了p元素");//不会为未来标签绑定事件
            })
            //$(selector).delegate(childSelector,event,data,function),selector是未来标签的上级
            $("body").delegate('p', //会为符合条件的现有标签和未来标签都绑定事件
                 'click', function () {
                     alert("通过delegate点击了p元素");
             });
             $("p").on("click",function(){//不会为未来标签绑定事件
                 alert("通过on点击了p元素");
             })
             //$(selector).on(event,childSelector,data,function,map),selector是未来标签的上级
             $("body").on("click","p",function(){//会为符合条件的现有标签和未来标签都绑定事件（将未来标签写道on方法里）
                 alert("通过on（将未来标签写在on方法里的方式）点击p标签");
             })
             //$(selector).live(event,data,function)
             $("p").live("click",function(){//会为符合条件的现有标签和未来标签都绑定事件
                 alert("通过live点击了p标签");
             })

             //----------------重要----------------------
             //这几种绑定事件的方式和jquery的版本有关，某些版本可能已经不支持某个绑定事件的方法。
             //为未来标签绑定事件推荐用on的方式。
             
        })
       
    </script>
</head>
<body> 
    <p>这是一个p元素</p>
    <div id="divId"></div>
    <input type="button" value="新生成p元素的按钮" id="newP">
</body> 
</html>

cxy_12345

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用datatable时，第一页行元素的点击事件好用，第二页点击事件不好用；为未来标签绑定事件

问题描述：使用datatable时，第一页行元素的点击事件好用，第二页的点击事件不好用，或者说页面加载后通过事件或ajax等新生成的标签对之前定义的该类标签的时间不好用，不能触发。问题原因：bind 和click只能为页面已经加载好的元素绑定事件，不能为未来元素绑定事件，翻页之后，第二页的数据是动态生成的，相当于未来元素，所以时间没有绑定上。解决方法：不用bind或click，使用未来元素...
复制链接

扫一扫