onClick event won't work until page is reloaded

Question

The following code snippet which includes an onClick event will not work until I click reload on both the simulator and the phone. The code is in an .erb file in an app model folder.

<section id="page1" data-role="page">
 <header data-role="header">
   <h1>CSS 3 Animations</h1>
 </header>
 <div data-role="content" class="content">
   <p class="show-menu" onclick="ToggleText()">(Show/Hide) Menu</p>

   <div class="sliding-menu slide out">Menu</div>
 </div>
</section>

<script type="text/javascript">
   function ToggleText() {
       $(".sliding-menu").toggleClass("reverse out in");
   }
</script>

I'm using rhomobile 3.2.1 with. Can someone explain why and what to do to fix it?

I initially did it that way and had to reload as well. – basheps Nov 01 '11 at 16:46 — basheps, Nov 01 '11 at 16:46

score 0 · Answer 1 · answered Nov 01 '11 at 16:21

Would something like this work?

http://jsfiddle.net/aJshm/3/

JS

$('.toggle-menu').click(function() {
    $(".sliding-menu").toggleClass("reverse out in");
});

HTML

<section id="page1" data-role="page">
    <header data-role="header">
        <h1>CSS 3 Animations</h1>
    </header>
    <div data-role="content" class="content">
        <p class="toggle-menu">(Show/Hide) Menu</p>

        <div class="sliding-menu slide out">Menu</div>
    </div>
</section>

score 0 · Answer 2 · answered Nov 01 '11 at 16:23

0

Just a guess, try defining the function before it is invoked?

answered Nov 01 '11 at 16:23

nan

4,238
4
25
24

onClick event won't work until page is reloaded

2 Answers2