javascript - 将 Jquery 对象传递给不适用于 IMG 的函数

Question

我想将 Jquery 对象传递给函数，但它不适用于 IMG 标签。

我做了下面的例子。当我点击文本时它有效，但是当我点击图像时它不起作用。

$(document).on('click','.playvid',function (event) {
    event.stopPropagation();
    popup($(event.target));
}); 
function popup(data)
{
    data.html("success");   
}

.playvid 
{
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div data-id="3ZdHRvPNyCI" class=" playvid" ><img src="https://cdn4.iconfinder.com/data/icons/iconset-addictive-flavour/png/button_green_play.png">WATCH DEMO</div>

Answer 1

这个问题是因为，根据您点击的位置，event.target 可以是 img 元素，它不能包含 html。相反，将 $(this) 传递给您的函数，因为它将包含 .playvid 元素:

$(document).on('click', '.playvid', function(event) {
  event.stopPropagation();
  popup($(this));
});

function popup(data) {
  data.html("success");
}

.playvid {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div data-id="3ZdHRvPNyCI" class="playvid">
  <img src="https://cdn4.iconfinder.com/data/icons/iconset-addictive-flavour/png/button_green_play.png">
  WATCH DEMO
</div>