Asign click handler to newly appended elements

Question

Hi, How does one go about adding a click handler in the following example? I need to assign it to the newly appended anchor element.

$.each(regions1, function(key, value) { 

    var coords = regions1[key].rel.split('-');
    $("#map").append("<a href='javascript:void(0)' id='"+ regions1[key].id +"' class='bullet' style='left: "+ addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)) +"; top: "+ addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset)) +"'>&nbsp;</a> ")

    //.click(function(){showPopup(regions1[key].id);})

});

Cheers

Answer 1

You want to use the .live jQuery keyword.

http://api.jquery.com/live/

$('.bullet').live('click', function() {
  // Bound handler called.
});

This sample, btw, needs to sit outside any of your other code and placed within the $(document).ready jQuery method. It will bind a click event to all items that have a class of "bullet".

Answer 2

try this...

$.each(regions1, function(key, value) { 

    var coords = regions1[key].rel.split('-');

    // first, create the element
    var element = $("<a href='javascript:void(0)' id='"+ regions1[key].id +"' class='bullet' style='left: "+ addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)) +"; top: "+ addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset)) +"'>&nbsp;</a> ");

    // then add the listener/handler
    element.click(function(){showPopup(regions1[key].id);})

    // finally, append the new element to the dom.
    $("#map").append( element );
});

cheers!