0

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?

Janey
  • 1,260
  • 3
  • 17
  • 39

1 Answers1

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)

ksloan
  • 1,482
  • 1
  • 13
  • 19
  • @Janey please update your post with what you actually use. Your code above and the fiddle dont help. – Omar Aug 13 '14 at 13:44
  • this is the code that I'm using except that the panel is in an external file - I cant reproduce that in JS fiddle – Janey Aug 13 '14 at 13:45