单击 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 设置了背景图像（这太可怕了，因为我在 link 中有一个 div 元素...）

顺便说一句，当用户点击前一个link时，它会执行在同一页面中定义的这个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")

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

How can I perform a JQuery script when a div element is clicked?

html

javascript

jquery

jquery-events