0

So I have a dynamically loaded button that is called with the following .live('click') event.

$('#page').live('pageinit', function() {
    $('.email-button').live('click', function() {
        // do button stuff
     });
});

However the behavior is very odd. When the page is loaded and you try to click the button nothing happens. Then if you refresh the same page the click event fires. It's almost as if it's not binding the first time around. I have also tried the .bind method as well as .live('vclick') method but nothing works the first time the page load and I can't seem to figure out what is causing this. I thought I read something along the lines of using .create but I didn't think it applied to me. Any leads in the right direction??

Naterade
  • 2,635
  • 8
  • 34
  • 54
  • I'm not familiar with jQuery mobile, but if you're using `live` why do you need to do it on `pageinit`? – lonesomeday Jan 20 '12 at 21:50
  • The docs for JQ mobile say to use it in lieu of $(document).ready() – Naterade Jan 20 '12 at 21:53
  • Well quite, but you normally don't need to wait for DOM ready to bind with `live`... Surely `pageinit` will be called multiple times, so you'll end up with multiple event handlers bound... (It would be a good idea to use `on`, rather than `live`, by the way.) – lonesomeday Jan 20 '12 at 21:55

1 Answers1

0

Found the answer here. How to initialize pages in jquery mobile? pageinit not firing

It works if you place

$('#page').live('pageinit', function() { $('.email-button').live('click', function() { // do button stuff }); });

within the body: <body> <div id="indexPage" data-role="page"> //code here </div> </body>

Community
  • 1
  • 1
Naterade
  • 2,635
  • 8
  • 34
  • 54