Question

I’m trying to automatically detect what div is clicked, and then add the text for a specific div.

So, here is what I’m trying to do:

$('#sjalland').live("click", function(e) {
    e.preventDefault(); 
    $('#searchBoxBig').val('Sjælland, ');
    $('#searchBoxBig').focus()

return false;
});

Now, I have 6 div’s that has to activate this function (like #sjalland) when clicked. But right now it looks like I have to create 6 of the same function?

How do I create something smart to detect which div is clicked, instead of creating 6 of the same function and then replace #sjalland with #midtjylland, #nordjylland etc etc.?

Answer 1

Give your divs the same class and use the classname as a selector instead of the id. e.g.

$(".someclassname").live("click", function() {
    $('#searchBoxBig').val($(this).attr("id")).focus();
});

Alternatively, apply the click callback to a containing div and use the event.target to detect which inner div was clicked (use event.stopPropagation() to prevent the event from bubbling up to the parent div).