jQuery on()方法监听动态加载对象

动态监听加载对象

  当使用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添加点击事件，事件有效。使用如上方法，无论是初始加载还是动态加载的对象都能实时监听。