javascript - jquery为动态插入的元素绑定事件无效？

Question

$('.top-nav-son-li a').on('click',function(){
    alert(11);
})

a节点是动态插入的，但是为什么无效呢？
jquery版本 "jquery": "^3.1.1"

Answer 1

on 有两种模式：

jquery on api
jquery on api 中文
第一种：
你那种 on 和 click 无差别

第二种：
采用 @StinsonZhao 的 on
事件委托绑定模式：
事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

$('页面中存在的元素，父级或者其他祖先，最狠的就用 document').on('click','你需要绑定的 selector ',function(){
    alert(xx);
});

扩展

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、
live()等事件函数。

上古时代动态绑定用delegate()、live()

Answer 2

因为是动态生成的，请使用事件代理

$('.top-nav-son-li').on('click','a',function(){
    alert(11);
})

Answer 3

因为你的dom节点还没有渲染出来出来你的点击事件就绑定上了，
可以设置一个定时器，或者注意一下节点添加和事件绑定的顺序。

Answer 4

动态插入的dom绑定事件，需要在dom插入完成后绑定事件，或者使用on的另一种写法

    $('ul').on("click",".top-nav-son-li a",function(){//ul为.top-nav-son-li非动态添加的父级
         alert(11);
    });

Answer 5

次序不对，等到你的a完全加载出来之后调用js，才能出来效果。