2 
<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 中的任何位置，并激活该功能（警报和附加仅用于测试）：

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

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

编辑：问题在于绝对定位。.myShips 位于另一个绝对定位的 div 中。我为单击添加了相同的功能，但针对所有被单击的 div。所以当我点击一个图像时，它的 ID 没有被提醒， .myShips id 也没有被提醒，但它的父 ID 被提醒，然后另外 2 个作为其父母的 div 被提醒。所以我认为问题在于 position: absolute

4

4 回答 4

1

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

那是我如何看待这个问题的唯一方法。

于 2013-08-03T00:49:16.077 回答
0

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

在文档“准备好”之前，无法安全地操作页面。jQuery 会为您检测到这种准备状态。包含在 $( document ).ready() 中的代码只会在页面文档对象模型 (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'); 
    });
});
于 2013-08-03T00:44:56.243 回答
0

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

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

于 2013-08-03T00:48:46.913 回答
0

当单击图像时，您将使用 jQuery 中的最接近（）函数来查找 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);
    });
});
于 2013-08-03T00:58:38.593 回答