Question

<div class="myShips" id="161">
       <img src="img/ships/red/sc.png" id="Ship161" 
         style="-webkit-transform:     rotate(45deg);">
       <div class="hpBarRed"><div class="hpBarGreen" style="width:15px;">
       </div></div>    
</div>

我希望有一个JQ点击功能，它会对我点击的.myShips div的ID做一些事情。但是，div中的图像与该div的大小相同，因此它位于div之上。所以基本上我希望能够点击该div中的任何地方，并激活该功能（警报和追加仅用于测试）：

$( '.myShips' ).click(function() {
    $("#hello").append("/*/");
    //alert($(this).attr('id'));
});

我尝试将.myShips类的z-index放大，但是没有用。什么是我最好的选择？我是否必须为图像添加另一个类，然后调用1个可能的2个函数？

编辑：问题在于绝对定位。 .myShips位于另一个绝对定位的div内。我添加了相同的单击功能，但是对于所有单击的div。因此，当我单击图像时，其ID不会被警告，也不会警告.myShips id，但会提醒其父ID，然后会提醒另外2个div作为其父项。所以我相信这个问题与位置有关：绝对

Answer 1

确保图像不是<img src="img/ships/red/sc.png" id="Ship161" />未设置为绝对位置。

这是我怎样才能看到这个问题的唯一方法。

Answer 2

您需要确保将点击功能包装在$(document).ready()包装器中。

在文档“准备就绪”之前，无法安全地操作页面 。 jQuery为您检测这种准备状态。代码包含在里面 $（document）.ready（）只会运行一次页面Document Object 模型（DOM）已准备好执行JavaScript代码。

而且，为了最安全，我会选择.on()来检查点击次数。

.on（）方法将事件处理程序附加到当前选定的集合 jQuery对象中的元素。从jQuery 1.7开始，使用.on（）方法提供附加事件处理程序所需的所有功能。

离开@jerrylow的例子：http://jsfiddle.net/DPDxz/2/

$( document ).ready(function() {
     $(document).on('click', '.myShips', function () {
        alert('here'); 
    });
});

Answer 3

只要图像没有捕获click事件，事件就会向上传播，并触发你的处理程序。

但是，如果图像上有单击处理程序，并且出于某种原因无法重构，则可以更改z-index，假设您将图像位置设置为relative或absolute。 http://codepen.io/anon/pen/BycJz

Answer 4

您可以使用jQuery中的closest()函数在单击图像时查找DOM元素的上层父元素。

$( document ).ready(function() {
    $('.myShips img').click(function(e){
       var image_id = $(this).attr('id');
       var ship_id = $(this).closest('.myShips').attr('id');
       console.log("ship:"+ship_id+" image:"+image_id);
    });
});

JQuery Click - 激活父级

4 个答案: