CODEWITHSUNDEEP
jqueryjquery-mobilejquery-events
biesior
biesior

Reputation: 55798

jQueryMobile and toggling DIV visibility

I've got strange behaviour and I can't realize how to fix it.

I've got mobile version of web service and on every page I'm placing search form in DIV element, whole container should be toggled with common jQuery's .toggle()

The code is (script is placed directly in page's code, like in the sample):

<div id="search-area" style="display: none">
    search form here...
</div>

<a href="#" id="search-area-switch" data-role="button">Search</a>

<script type="text/javascript">
    $('#search-area-switch').live('tap',function (event) {
        $('#search-area').toggle();
    });
</script>

My problem is that toggle() works only on the first page after reload and after next page change toggling is not possible anymore. (BTW. pages are loaded with AJAX to keep transitions etc.)

What did I missed?

Upvotes: 0

Views: 2238

Answers (1)

josh shadowfax
josh shadowfax

Reputation: 304

If the script is in the head of the page it won't be run when you change pages, since Jquery Mobile ignores the head after the first page.

In general, having multiple items with the same id is bad practice. It's better to make them each the same class and then have your selector find the items that way.

Upvotes: 1

Related Questions