Onclick not working in panel after page change

Question

I'm creating a small webapp using jquery mobile and php. I have an issue where I have a menu in a panel which i need to run an onclick event from. This works fine when the page has been re-loaded either using data-ajax='false' or running a page refresh. However when I try to use the event after a page change it just doesn't respond at all.

Here is my onclick code

    $('#searchOptionMap').click(function()
        {
            window.alert("map clicked ");
        });

and you can see the js fiddle here http://jsfiddle.net/jbcvnz0p/

1. If you go to page 1 - panel click - map click the alert appears

2. If you then navigate to page 2 - panel click - map click the alert doesn't appear

3. If you stay on page 2 and click the map collapsible - alert appears

You can see that the same onclick event works for a collapsible set outside the panel, just not within it. Is there any fix for this other than using data-ajax='false' or running a page refresh?

Answer 1

You have two divs with the same id, when you bind something with jQuery using an id, it only does the first one.

$('#searchOptionMap').click(function()
    {
        window.alert("map clicked");
    });

So use a class instead, or make the panel external if it's going to be the same panel for both pages.

(#searchOptionMap2 works in this case because there's only one of them)