Maison > Questions et réponses > le corps du texte
<ul class="buy-list">
<li class="item">
<p class="sour-price">
<p class="source">京东商城</p>
<p class="price">¥1140</p>
</p>
<p class="desc-buylink">
<p class="desc">京东商城</p>
<p class="buylink">购买</p>
</p>
</li>
...
...
</ul>
上面的结构,ul下面有很多li,现在我把事件委托到ul上,
代码:
var buyList = document.querySelector('.buy-list');
buyList.onclick = function(e){
var target = e.target;
// 只有点击li才触发事件
if(target.className.indexOf('item') !== -1){
// do something
}
}
我想实现的效果是:点击li或li内部的任意一个元素,都会执行事件。
但是上面的写法只有当我点击li时才会执行do something,点击的是sour-price 或 price元素,都不会执行do something...
请问如何实现我想要的效果?
PS:当然,判断 target.parentNode
或 target.parentNode.parentNode
看看是不是li也是可以的,但老觉得这么写不优雅。假设li里的结构更加复杂的话,这样写就不行了,总不能N个parentNode,一直往上找吧?
大家讲道理2017-04-10 17:03:26
这样就可以了:
$('.buy-list').on('click','.item',function(){
//do something...
});
可实现一次绑定给父元素$('.buy-list')下所有的目标子元素.item