javascript - 图片上的点击事件突然不起作用

Question

这是我的相关 HTML

 <div class="left">
        <p class="cookie_text"><span id="cookies">0</span> Cookies</p>
        <img src="cookie.png" id="cookie_img" usemap="#cookie_map" alt="Cookie">
        <map name="cookie_map" id="cookie_map">
            <area shape="circle" coords="130,110,140" alt="Cookie" id="map_area">
        </map>
    </div>

这是我相关的JS

$('#cookie_img').on("click", "img", function () {
    console.log("yea");
    cookieClick(1, true);
});

连接工作正常，其他点击事件也工作正常。我以前可以使用它，但我没有备份...有人可以帮忙吗？

Answer 1

img 不是 cookie_img 的子级，因此 event-delegation 将不起作用!

如果您想使用事件委托(delegate)，请使用以下代码，考虑到.left left是静态元素。

$('.left').on("click", "img", function() {
  console.log("yea");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
  <p class="cookie_text"><span id="cookies">0</span> Cookies</p>
  <img src="cookie.png" id="cookie_img" usemap="#cookie_map" alt="Cookie">
  <map name="cookie_map" id="cookie_map">
            <area shape="circle" coords="130,110,140" alt="Cookie" id="map_area">
        </map>
</div>