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无效！

如果您想使用event-delegation，请使用以下代码，考虑.left left是一个静态元素。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个

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

图像上的点击事件突然不起作用

2 个答案: