(Jquery)解决通过class操作click函数时点击失效问题

一，问题代码

<!-- HTML -->
<div id="test">
<div class="test-name">名称<button class="test-name-button">按钮</button</div>
<div class="test-name">名称<button class="test-name-button">按钮</button</div>
</div>

//js
$(document).ready(function(){
 $(".test-name-button").click(function(){
    //这里是点击后执行的一些动作
 });
});

当点击子类button时，会出现click函数并不执行的情况。如上所示，$(".test-name-button").click在点击后毫无反应，但也并不会报错。

二，解决方法

修改js中的click函数，使用该子类button的父亲div或祖父div...的id值，来选中该button。

//js
$(document).ready(function(){
 $("#test").on("click",".test-name-button",function(){
    //这里是点击后执行的一些动作
 });
});