使用load函数加载页面后jQuery keyup事件失效问题排查

你遇到的这个问题其实很常见——事件绑定只对页面初始加载时就存在的DOM元素生效，而你通过jQuery的load()方法动态加载的b.jsp内容，是在页面初始化之后才被添加到DOM中的，所以你一开始写的keyup事件根本没绑定到这些新元素上。

问题根源 #

你原来的事件绑定代码是这样的：

$('#assmt_count').keyup(function() { alert("hi"); });

这段代码会在页面加载完成后，立即查找id="assmt_count"的元素并绑定事件，但此时b.jsp还没被加载，这些元素根本不存在。等你通过下拉框改变加载b.jsp后，新元素已经加入DOM，但事件绑定早就执行完了，自然不会触发。

另外还要提个小问题：你在b.jsp的循环里给每个input都设置了相同的id="assmt_count"，这是不符合HTML规范的——id必须是页面唯一的，建议改成带唯一标识的id，比如：

<input type='number' class='assmt_count' id='assmt_count_<%=resultSet1a1.getString("complexity_type_id")%>' min="0" max="<%=resultSet1a1.getString("cnt")%>" name="cnt<%=resultSet1a1.getString("complexity_type_id")%>" disabled/>

修复方案：使用事件委托 #

jQuery的事件委托机制可以解决这个问题——把事件绑定到一个初始就存在的父元素上，让事件通过冒泡机制触发到动态添加的子元素上。

你可以把事件绑定改成这样：

// 用#q_bank_criteria作为父元素，因为它是初始就存在的，而且是动态加载内容的容器
$('#q_bank_criteria').on('keyup', '.assmt_count', function() {
    alert("hi");
});

这样不管你什么时候加载b.jsp，只要新元素的class是assmt_count，并且在#q_bank_criteria容器里，keyup事件就会正常触发。

为什么用#q_bank_criteria而不是document？因为把事件绑定到更接近目标元素的父元素上，性能会更好，避免不必要的事件冒泡。

额外验证 #

你可以在load()的回调函数里做个测试，确认动态加载完成后元素存在：

$('select[name=final_assessment_id]').change(function () { 
    var assessment_id = $(this).val(); // 这里注意你原来的代码里assessment_id变量需要定义哦
    $('#q_bank_criteria').load('b.jsp?assessment_id=' + assessment_id, function() {
        // 加载完成后打印元素数量，确认是否存在
        console.log($('.assmt_count').length);
    }); 
});

（另外你原来的load里写的是b.jsp.jsp，应该是笔误，改成b.jsp就好）

内容的提问来源于stack exchange，提问作者Vidhya