jQuery on()方法监听动态加载对象_jq 监听元素异步加载

动态监听加载对象

当使用js或jQuery动态创建元素(例如append)，再用 on(事件, function(){...}) 或 addEventListener 监听事件时，事件并不会触发，因为传统的 $('.selector').click() 只能监听html初始的对象，对于动态加载的操作，需要在加载后给他的操作行为绑定方法。
所以，我们可以使用jQuery的on()事件来获取未加载页面的内容，并为它添加一个或多个事件处理程序。

jQuery.on()

定义和用法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off() 方法。

提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

$(selector).on(event,childSelector,data,function)
参数 描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。 
    $("#trashB").on('click', function() {
        // 遍历废纸篓中的笔记
        listNoteInBin();
    function listNoteInBin() {
            // 遍历废纸篓中的笔记
            $.post("${pageContext.request.contextPath}/BinServlet?method=listNoteInBin", {}, function(data) {
                $("#note-in-bin").html("");
                $.each(data, function(i, obj) {
                    var li = "<li id=\"noteInBin"+obj.id+"\"><i class=\"icon-file filei\"></i><span>"+obj.title+"</span><i class=\"icon-trash trashi both\"></i><i class=\"icon-undo both\"></i></li>";
                    $("#note-in-bin").append(li);
            }, 'json');
  为trashB绑定一个点击事件，调用jQuery.post()方法向后端发出请求，获取返回数据data并在note-in-bin下动态创建li。 
    $(document).on('click', '.trashi', function() {
        var noteInBinID = this.parentNode.id.slice(9);
        alert(noteInBinID)
  使用jQuery.post()方法，为动态生成的li下的元素trashi添加点击事件，事件有效。使用如上方法，无论是初始加载还是动态加载的对象都能实时监听。
				鉴于工作中经常会用到对动态元素事件的监听，虽然对于jquery的一些低版本而言（如jquery 1.7.2），
可以使用live来监听动态元素的事件，but，时代在发展嘛 。。总归不能老是囿于老版本的那些库啦！
废话少说，言归正传，直接上代码。。
html:
     Add new element
				支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7之后就不推荐使用了。现在主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，可以放在on的第二个参数里面。
案例如下：
<!DOCTYPE html>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"&g
				什么是事件监听：当用户在界面上执行一个操作，例如按下键盘、拖动或者单击鼠标时，都将产生一个事件。类似的DOM事件如：onclick、onmouseover、onmouseout、onkeydown、onkeyup、onkeypress、onload、onselect、onchange、onchange、onfoucs、onblur等等。那么，我们对这些事件进行监听就叫做事件监听。
jquery总...
				$(".comment").on("click", "#zan_img", function () {
        console.log(this.tagName.toLowerCase()); // "a"
        var canZan=$(this).attr('zaned');
        if (canZan=='c') {
            var approvin
				jquery中的live()方法在jquery1.9及以上的版本中已被废弃，如果使用，会抛出TypeError: $(…).live is not a function错误。
解决方法：
之前的用法：
.live(events， function)  
新方法：
.on(eventType, selector, function)
若selector不需要，可传入null
				$("#demo-input").on('keyup',function(e){//绑定id="demo-input"的键盘UP的状态
  console.log(222);
})以下是所有的事件名称：(自己百度每个的含义，不多做赘述)  blurfocusfocusinfocusoutloadresizescrollunloadclickdblclickmousedownmouseu...
    <script type="text/javascript" src="jquery-3.6.0.js" ></script>
<script type="text/javascript">
$(function(){
	$(".btn").click(function(){
		$("p").append("<button class='test'

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。