JQuery Click - activate parent

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>

I wish to have a JQ click function, that will do something with the ID of the .myShips div I click. However, the image inside the div is the same size of that div, so it is above it. So basically I want to be able to click anywhere in that div, and activate the function (the alert and append are just for testing):

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

I tried putting a larger z-index of the .myShips class but that did not work. what is my best option? Will I have to add another class for the images and then have 1 of possible 2 functions being called?

EDIT: The problem is with absolute positioning. .myShips is inside another div that is absolutely positioned. I added the same function for click, but for ALL divs that are clicked. So when I click an image, its ID is not alerted, neither is the .myShips id alerted, but its parent id is alerted, and then 2 more divs that are its parents are alerted. So I believe the prblem is with position: absolute

That doesn't sound right. Here's my test in fiddle: http://jsfiddle.net/DPDxz/ - can you post a link on your test? Clicking on any object inside the div should work unless there's something preventing it. — jerrylow, Aug 03 '13 at 00:38
Do you have your click function wrapped in a [$(document).ready()](http://learn.jquery.com/using-jquery-core/document-ready/) wrapper? If not, you should. — Luke Shaheen, Aug 03 '13 at 00:41
I see something is preventing it after all. I tried the same thing with other elements and the function works, but not for .myShips You have to log in to see the code and there is a lot of code so I dont want to bother you... thanks! — Dejan Biljecki, Aug 03 '13 at 00:46

score 1 · Accepted Answer · answered Aug 03 '13 at 00:49

1

make sure the image is not <img src="img/ships/red/sc.png" id="Ship161" /> is not set to position absolute.

thats the only way how i can see this issue possible.

answered Aug 03 '13 at 00:49

Darkagelink

647
1
8
16

can you share a link to the problem? – Darkagelink Aug 03 '13 at 00:55
the thing is, the image need to be outside of the did in order to blocking the event of the "onclick" of the .myShips.... but : if you wanna give it a try do this : #Ship161 {position:static !important} – Darkagelink Aug 03 '13 at 00:59
@user1479059 Don't post logins to anything, even dummy logins. – Luke Shaheen Aug 03 '13 at 01:00
When you click on the image, its parent is myShip div, but the parent of that div gets its ID alerted, and then other parent divs... – Dejan Biljecki Aug 03 '13 at 01:02
ok, so i see - the problem is that makeMove() needs to be called last once all the img are already in place... try to call it right after the function : drawShips(info); – Darkagelink Aug 03 '13 at 01:10
1

That did not work but, You are most likely right, but now I see another problem - makeMove() is being called even if it is not your turn, so I have to deal with that first. After that I can continue. Anyway, thanks a lot - I really appreciate and am amazed by how fast you figured that out! – Dejan Biljecki Aug 03 '13 at 01:31
Yes you were right - if I setTimeout to 2000, the code that adds the click handler, it gives it time for ajax to get the ships from the server and place them on the board. Thanks! – Dejan Biljecki Aug 03 '13 at 03:20

Luke Shaheen · Answer 2 · 2013-08-03T00:50:28.737

0

You need to make sure you wrap your click function in a $(document).ready() wrapper.

A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

And, to be safest, I'd go with .on() to check for the click.

The .on() method attaches event handlers to the currently selected set of elements in the jQuery object. As of jQuery 1.7, the .on() method provides all functionality required for attaching event handlers.

To go off of @jerrylow 's example: http://jsfiddle.net/DPDxz/2/

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

edited Aug 03 '13 at 00:50

answered Aug 03 '13 at 00:44

Luke Shaheen

4,262
12
52
82

The function works for other divs, just not myShips - they are absolutely positioned and I guess that might be the problem. – Dejan Biljecki Aug 03 '13 at 00:56
You seem unsure what absolute positiong means. Check out [Difference between style = “position:absolute” and style = “position:relative”](http://stackoverflow.com/a/4457821/761793) – Luke Shaheen Aug 03 '13 at 00:57

score 0 · Answer 3 · answered Aug 03 '13 at 00:48

As long as the click event isn't being captured by the image, the event would propagate up the dom, and trigger your handler.

If, however, there is a click handler on the image, and for some reason that cannot be refactored, you can change the z-index, assuming you set the image position to relative or absolute. http://codepen.io/anon/pen/BycJz

score 0 · Answer 4 · answered Aug 03 '13 at 00:58

You would use the closest() function in jQuery to find the upper parent for a DOM element when the image is clicked.

$( 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 - activate parent

4 Answers4