关于一些动态创建的节点无法绑定事件的问题

        在我们HTML页面中有时候一些DOM元素节点(例如:一些页面加载的新闻公告列表[如下图])是需要通过AJAX请求接口数据动态创建的,而当我们想在JS中想为这些节点绑定事件(如:click,hover...等)时便会出现无法绑定的情况,使用window.onload方法在页面加载后才执行也不行。

关于一些动态创建的节点无法绑定事件的问题_第1张图片

解决办法:

        使用JQ提供的.on()和.delegate()方法可以解决解决此问题,给动态加载的元素成功绑定上事件,但是在这两种方法的参数中一定得写上我们需要绑定事件的那个元素选择器。如:$("#parent").on("click",".list",function(){ } )  $("#parent").delegate("click",".list",function(){ } )

其中两种方法内的第二个参数 .list 是我们动态加载的那个元素,前面的 #parent 是包裹着这些加载出来的元素的一个父元素。

//.list为新闻里的每一条公告,是我们动态创建的;#parent是一个包裹着里的这一行行公告的一个div。
//一般来说,我们绑定事件的写法都是用下面的第一和第二种写法。但是这种写法是绑定不上的。
$('#parent .list').click(function(){//1.直接使用click(fn)方法绑定不上
    console.log($(this).html());
})
$('#parent .list').on('click',function(){//2.使用on("click",fn)方法还是绑定不上
    console.log($(this).html());
})
$('#parent').on('click','.list',function(){//3.此种写法可以成功绑定
    //使用on("click","...",fn),在on里面增加一个参数(需要绑定的那个节点),同时前面调用.on方法的元素改为该节点的父元素即:$('#parent')
    console.log($(this).html());
})
$('#parent').delegate('click','.list',function(){//4.此种写法可以成功绑定
    //使用delegate("click","...",fn),在delegate里面增加一个参数(需要绑定的那个节点),同时前面调用.delegate方法的元素改为该节点的父元素即:$('#parent')
    console.log($(this).html());
})

你可能感兴趣的:(web前端,一些前端的小问题,动态创建的节点,无法绑定事件)