jQuery选择器无法识别修改后的data属性，绑定点击事件未生效

问题根源 #

• jQuery的直接事件绑定只会在代码执行初始化阶段，匹配当下符合选择器的DOM元素绑定事件。你的代码运行时，body的data-page属性值为first，所以只有body[data-page="first"] .start对应的点击事件能成功绑定到.start元素上；第二个选择器body[data-page="second"] .start初始化时匹配不到任何元素，对应的事件根本没有绑定成功，自然不会触发。
• 你第一段点击回调中的body.attr('data-page','second')写法错误，body变量未提前定义，会直接抛出未定义错误，需要改为$('body').attr('data-page','second')。

修复方案 #

使用事件委托的写法，将事件绑定到DOM结构不会动态变更的上层元素（比如document），每次点击触发时再去匹配选择器，就能响应动态修改的属性：

$(document).on('click', 'body[data-page="first"] .start', function (){
    $('body').attr('data-page','second');
});
$(document).on('click', 'body[data-page="second"] .start', function (){
    console.log('Test');
});

实现原理 #

事件委托依托浏览器事件冒泡机制实现：子元素触发的事件会逐层向上冒泡到父级元素，我们把事件绑定到稳定的父级元素上，每次事件冒泡到父级时，都会校验触发事件的目标元素是否符合指定的选择器规则，符合规则就执行对应的回调逻辑。不管目标元素的属性是初始化自带的还是后续动态修改的，只要触发事件的当下符合选择器规则，就能触发回调。

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