web 入门之动态绑定事件
2018-05-02 本文已影响0人
litielongxx
前言
尽管目前的mvc框架流行已久，但是基于jq的dom操作和arttemplate之类的js渲染模板书写的页面不在少数。涉及到动态生成结构的话，就以ul>li*3为列子。
1.动态生成的li绑定的事件为什么失效？
2.如何获取生成的li的索引数值？
页面结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<ul>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
$(function(){
$('ul').on('click','li',function(i){
alert($(this).data('index'))
})
})
</script>
</body>
</html>
动态生成dom结构
1. 这里利用定时器模拟ajax的请求效果，动态生成的元素。
setTimeout(()=>{
$('ul').html('<li data-index="1">1</li><li data-index="2">2</li><li data-index="3">3</li>')
},1000)
2.动态绑定点击事件。
2.1常见的可能是这种，但你会发现触发不了事件。很简单，因为你直接绑定的话li还没有生成，当然不可能触发。
//()=>相当于没有名字的函数function(){}
$('ul li').on('click',()=>{alert()})
2.2动态生成的元素需要通过委托给上级parent元素，然后指定子元素li元素绑定事件。获取index数值的话，会默认为-1即为空，需要通过自定义属性再获取得到index数值。
自定义data-index属性，再通过data('index')获取数值。
setTimeout(()=>{
$('ul').html('<li data-index="1">1</li><li data-index="2">2</li><li data-index="3">3</li>')
},1000)
$('ul').on('click','li',function(i){
alert($(this).data('index'))
})
绑定简单的原理基本就是通过先捕获e.target.tagName判断是否为li，再冒泡判断是否存在事件，没有的话就继续往上查找，最后从底层依次。
