您的位置: 首页  >  文章  >  Ajax动态生成元素后无法绑定事件的Bug - JQuery的on()方法

Ajax动态生成元素后无法绑定事件的Bug - JQuery的on()方法

分类: 文章 • 2024-02-19 18:37:34

前言

JQuery 1.4版本之后新增了 on 方法，这个用得比较多，on 方法是专门用来处理事件委派机制的，笼统的说 就是解决在你 Ajax 事件无法绑定到新添加的元素上的问题的，很多JQuery中的bug问题也都出现在这。

需求分析

使用Ajax获取数据，动态生成编辑等按钮，点击编辑按钮时无论如何都无法绑定点击事件。

效果图

Ajax动态生成元素后无法绑定事件的Bug - JQuery的on()方法

问题分析

  1. 因为 Ajax 获取到数据后我们先生成了界面，因此在后面再进行绑定是无效的。
  2. 我们可以在生成的时候同时绑定事件，但是代码太多，太耦合，并不推荐。

Ajax请求根据数据生成页面信息

// 获取中间的内容栏
function getContent(result) {
    var empData = result.data.pageInfo.list;
    var $tbody = $("#myTable>tbody");
    $tbody.empty();
    $.each(empData, function (index, item) {
        var $checkbox = $("<td></td>").append($("<input type='checkbox'/>"));
        var $tdId = $("<td></td>").append(item.empId);
        var $tdName = $("<td></td>").append(item.empName);
        var $tdEmail = $("<td></td>").append(item.email);
        var $tdGender = $("<td></td>").append(item.gender === "0" ? "女" : "男");
        // 生成编辑和删除按钮
        var $tdButton = $("<td></td>")
            .append($("<button>编辑</button>").addClass("btn btn-default edit_emp_btn"))
            .append($("<button>删除</button>").addClass("btn btn-danger dele_emp_btn"));
        var $tr = $("<tr></tr>").addClass("row")
            .append($checkbox)
            .append($tdId)
            .append($tdName)
            .append($tdEmail)
            .append($tdGender)
            .append($tdButton);
        $tbody.append($tr);
    });
}

原来绑定的方式

// 绑定失效代码
$(".edit_emp_btn").click(function () {
    alert("1234");
});
// 绑定失效代码
$(".edit_emp_btn").on("click",function(){
  	alert(1234);
})

解决方式

【1】 可以使用 live() 方法进行动态绑定，但是不推荐高版本可能随时弃用移除此方法

【2】 事件的绑定统一使用 on 进行绑定，$(document).(“click”,".up",function())可以达到同样的 live 方法的效果

总结结果

jQuery从1.7开始，引入了全新的事件绑定机制，on() 和 off() 两个函数统一处理事件绑定。因为在此之前有bind(), live(), delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

  • on（events,[selector],[data],fn）
    • events：一个或多个用空格分隔的事件类型和可选的命名空间，如"click"。
    • selector：一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
    • data：当一个事件被触发时要传递event.data给事件处理函数。
    • fn：该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

在1.4之前相信大家非常喜欢使用live(),因为它可以把事件绑定到当前以及以后添加的元素上面，当然在1.4之后delegate()也可以做类似的事情了。live()的原理很简单，它是通过document进行事件委派的，因此我们也可以使用on()通过将事件绑定到document来达到live()一样的效果。

live()写法
$('#edit').live('click', function() {
	//function code here.
});

on()写法
$(document).on('click', '#edit', function() {
	//function code here.
});

相关推荐