2

I've tried looking around and can't seem to find the same case so here's my problem:

Can anyone please help me with this simple error. Jquery is not my strongest suite but I feel like this is something small that I'm missing. With the code below I get the error 'undefined'.

html:

<a href='#' ><img src= "./images/1.jpg"  width= '200px'  id="2" rel="arm1" onclick = 'test()' /></a>

Jquery:

function test(){
    alert($(this).html());
};

What I want is the HTML code of the img tag being clicked on. Is there another way to do this?

So I've tried the following and it doesn't work as well: I've added the onclick to the ahref tag aswell.(error : undefined) I've tried passing by 'event' as a parameter. (error stating 'event' is not declared) when trying to get its html().

PS I do not want to use the id as a onclick function!

Anyhelp will be very much appreciated!

Thanks!

Muppet
  • 356
  • 1
  • 4
  • 14
  • It means that `test` function is not defined or is not available in global scope. – dfsq Oct 26 '14 at 18:27
  • The `test()` is called in context of `window` and not of the `img` element, so `this` refers to `window`. Even if it would refer to `img` then `html()` would return the `innerHtml` of the `img`element which will always be empty. – t.niese Oct 26 '14 at 18:29
  • @dfsq hmmm well it does pop up the alert statement? So it can pick up test function. Is there another way to retrieve the html of that element? – Muppet Oct 26 '14 at 18:29
  • @t.niese thanks for clarifying that! As said in my above comment Is there another way to retrieve that clicked element's html? – Muppet Oct 26 '14 at 18:31
  • From teh top of my head, can't you add `this` as an argument. http://stackoverflow.com/questions/925734/whats-this-in-javascript-onclick – Daniel Oct 26 '14 at 18:33
  • Would event.currentTarget be a decent way to access the target object? – James M. Lay Oct 26 '14 at 18:34
  • 1
    Also IDs can't start with, or just be a number: http://css-tricks.com/ids-cannot-start-with-a-number/ – logic-unit Oct 26 '14 at 18:36
  • Also, there's wide support for the outerHTML property, if you want to try using that. `element.outerHTML`. – James M. Lay Oct 26 '14 at 18:36
  • Thanks for the great response. I'll try a few of the suggested options and report back! @logic-unit - the problem is I'm getting that Id actually from the database hence the number.It's acting as a 'product id' – Muppet Oct 26 '14 at 18:40
  • @Muppet Try using the data attribute to store that information: data-product-id="2". https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes – logic-unit Oct 27 '14 at 15:32

2 Answers2

2

All right, this is how you can get image HTML:

function test(obj) {
    alert($(obj).parent().html());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#">
    <img src= "http://lorempixel.com/100/100" onclick="test(this)" width="200px" id="2" rel="arm1" />
</a>

As you can see you can pass current image object to click handler as this. From there you go to parent element (a) and read its HTML content, which is going to be an image HTML.

UPD. t.niese in comments have a point about outerHTML, which has good support so the ideal code will look like:

alert(obj.outerHTML);
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • As `outerHTML` is supported since FF 11 I would use `$(obj)[0].outerHTML` as it would also work if `a` not only contains the `img` – t.niese Oct 26 '14 at 18:37
  • @t.niese why not `obj.outerHTML`? – Johan Karlsson Oct 26 '14 at 18:38
  • @t.niese Ha! I always thought, that `outerHTML` is not well supported in IE. I was wrong. Thank you, of course `outerHTML` must be used here. – dfsq Oct 26 '14 at 18:39
  • @caeth yes you are definitely right. It was a long day :D – t.niese Oct 26 '14 at 18:40
  • Thanks everyone - I didn't actually know about the outerHTML! I've tried the .child() route via the anchor tag but I couldn't get it to work. But thanks you've all helped ALOT! – Muppet Oct 26 '14 at 18:54
1

this in your test() function refers to Window. To access the clicked element, try this:

HTML:

<element onclick='test(this)' />

JS:

function test(element){
    alert(element.innerHTML);
};

though clicking an <img> will not show you anything as its innerHTML will be empty.

Edit: As dsfq said, alert(element.outerHTML) will show you the HTML of your image.

Johan Karlsson
  • 6,419
  • 1
  • 19
  • 28