Strange Javascript behaviour

Question

I am using JQuery to append images, like this:

$('#event_list_main').append('<img class="listed_event" id="event_'+event_counter+'" data-count="'+event_counter+'" src="final_tutorial_buttons/event.png" height="50" width="50" onclick="highlight();" />');

I am assign a highlight function to each image I create and append! The problem is that the highlight function does not execute.

//Highlight function
function highlight()
{
    var indicator = $(this).data("count");
    alert(indicator);

}

the "this" part doesnt seem to work.I want this to refer to each event created.

for example if I created 3 events

event_1 event_2 event_3

and I click on "image event_2" then "this" must refer to "image-event_2"

Also, consider delegating the "click" event to the '#event_list_main' element... — Šime Vidas
– Šime Vidas, Commented Mar 6, 2012 at 12:49
This question is similar to: Javascript "this" reference for onclick event not working. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — dumbass
– dumbass, Commented Dec 1, 2024 at 15:15

ThiefMaster · Accepted Answer · 2012-03-06 12:43:49Z

4

Try onclick="highlight.call(this);"

However, it would be much cleaner to properly attach an event handler:

var img = $('<img class="listed_event" id="event_'+event_counter+'" data-count="'+event_counter+'" src="final_tutorial_buttons/event.png" height="50" width="50" />');
img.on('click', highlight);
$('#event_list_main').append(img);

Or even more readable:

var img = $('<img/>', {
    'class': 'listed_event',
    id: 'event_' + event_counter,
    src: 'final_tutorial_buttons/event.png'
}).height(50).width(50).data('count', event_counter).on('click', highlight);
$('#event_list_main').append(img);

answered Mar 6, 2012 at 12:43

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Florian Margaine Over a year ago

It would be even cleaner this way:

var img = $('<img />').attr({class: 'listed_event', id: 'event_' + event_counter, 'data-count': event_counter, src: 'final_tutorial_buttons/event.png'}).click(highlight).appendTo('#event_list_main')

. On several lines, of course.

Šime Vidas Over a year ago

It would be even more cleaner with a template.

Aidiakapi · Accepted Answer · 2012-03-06 12:45:08Z

That's not unexpected behavior, you're not passing the this value. But you expect it because jQuery does that automatically for you.

This is an easy fix:

$('#event_list_main').append('<img class="listed_event" id="event_'+event_counter+'" data-count="'+event_counter+'" src="final_tutorial_buttons/event.png" height="50" width="50" onclick="highlight.call(this);" />');

Even though it'd be better to replace it all together with:

$('<img class="listed_event" id="event_' +
     event_counter + '" data-count="' +
     event_counter + '" src="final_tutorial_buttons/event.png" height="50" width="50" />')
     .click(highlight).appendTo("#event_list_main");

Please see this post for more information about how call(), apply() and this.

Collectives™ on Stack Overflow

Strange Javascript behaviour

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related