我正在使用此代码在某个元素上显示警报:
$("#resultsBox").click(function (event) { console.log('a'); });
我想只在你点击’#resultsBox’里面的’li’元素时才显示警告.
我试着这样做:
$("#resultsBox li").click(function (event) { console.log('a'); });
这是元素的#resultsBox结构:
<div id="resultsBox"> <ul> <li></li> <li></li> </ul> </div>
如何才能做到这一点?
解决方法
当您使用.click()绑定事件处理程序时,它将应用于此时与您的选择器匹配的任何元素,而不是以后动态添加的元素.
鉴于你的div被称为“resultsBox”,假设你实际上是动态添加东西以显示其他操作的结果似乎是合理的,在这种情况下你需要使用委托的事件处理程序:
$("#resultsBox").on("click","li",function (event) { console.log('a'); });
这个.on()
method的语法将处理程序绑定到“#resultsBox”,但是当点击发生时,jQuery检查它是否在第二个参数中与“li”选择器匹配的子元素上 – 如果是这样,它会调用你的函数,否则不会.