javascript - 单击 div 元素时如何执行 JQuery 脚本？

Question

我对 JavaScript 和 JQuery 还很陌生，但遇到以下问题。

在一个页面中，我有一个非常可怕的 HTML 结构:

<a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}" class="showWifi">
    <div id="wifiIcon_${item.index}"  class="news_box news_box_01 hvr-underline-from-center highLightButton" style="margin-right: 50px; border-radius: 25px;">    </div>
</a>

并且内部 div 通过 CSS 设置了背景图像(这非常可怕，因为我在链接中有一个 div 元素...)

顺便说一句，当用户单击上一个链接时，会执行定义在同一页面中的 JQuery 脚本:

$(document).ready(function(){
    $(".showWifi").click(function(event){

        // Retrieve the id of the clicked element:
        clickedButton = this.id;    
        .............................................
        .............................................
        DO SOMETHING
        .............................................
        .............................................
    });
});

好的，所以我按照这样的方式重构了之前的 HTML 结构:

<div id="showWifi" style="float: left; margin-right: 40px;">
    <img src="<c:url value="resources/img/icons/projects/wifi.png" />">
</div>

所以我有一个包含图像的 div。

我想要做的是当新的div(具有id="showWifi")被点击时执行之前的JQuery脚本，但实际上之前的脚本无法在这个元素上工作，因为这个div元素似乎不可点击。

当点击具有 id="showWifi" 的 div 时，如何解决此问题并执行我的脚本？

Answer 1

所以你可以在这里使用多个选择器。

$(document).ready(function(){
    $(".showWifi,#showWifi").click(function(event){

        // Retrieve the id of the clicked element:
        clickedButton = this.id;    
        .............................................
        .............................................
        DO SOMETHING
        .............................................
        .............................................
    });
}); 

希望对你有帮助