Question

I have an infoBox displayed on a map that is populated with a list of links (I have given these links the class ‘.mapLinks’).

My goal is to use JQuery within the ‘main page’ (contained within the page where maps canvas div is located) to identify and disable the links and instead use them to reveal a div that is located on the ‘main page’. My JQuery is as follows;

$('.mapLinks').click(function(event) {
    event.preventDefault();
    $('#divOnMainPage').addClass('hidden');
});

Any help would be greatly appreciated.

Answer 1

If they are added dynamically you will need to use .delegate():

$(document).delegate('.mapLinks', 'click', function(event) {
    event.preventDefault();
    $('#divOnMainPage').addClass('hidden');
});

Or if you are using 1.7+ you can use the .on() syntax:

$(document).on('click', '.mapLinks', function(event){
    event.preventDefault();
    $('#divOnMainPage').addClass('hidden');
});

This will bind the event to a parent element (document in this case) and catch the bubble up of the event. Therefore you can add and remove .mapLinks dynamically and it will still work.