单击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
        .............................................
        .............................................
    });
}); 

希望对您有所帮助

Answer 2

你可以这样做：

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

然后将选择器改为id选择器：

$("#showWifi")