0

Heres the scenario.

I'm using mobile jQuery. Meaning my HTML gets updated using ajax.

I have a navigation menu on top.

I have 2 pages (ID= "#P1" and ID="#P10"). Both pages contain the same nav menu.

When user clicks on a icon on the menu it should slide one of my divs into the screen. When the user click "x" or outside of the new div it should get closed.

I'm handling this using the next JS code.

$(document).bind('pageinit', function() {
    alert('TEST');

$(document).on('click' , '.menu_open' , function() {  

  $('.mask').addClass('mask_visible');
  $('#menu').animate({  
  marginLeft: "0%",  
  opacity: 1  
  }, 200);  
  $('#menu').css('display', 'block');  
});  


$(document).on('click','.menu_close , .mask ', function() {  
  $('.mask').removeClass('mask_visible');
  $('#menu').animate({  
  marginLeft: "-100%",  
  opacity: 0  
  }, 200);  
});  

$(document).on("swipeleft", '#menu', function(){
  $('.mask').removeClass('mask_visible');
    $('#menu').animate({  
  marginLeft: "-100%",  
  opacity: 0  
  }, 200);  
});

});

How it looks.

Currently this code is placed in after all the scripts.

The problem is that my code works only on the first page that I load. After I redirect to the second page my "alert" code will trigger but I won't be able to pull out my nav bar anymore.

Paran0a
  • 3,359
  • 3
  • 23
  • 48
  • If this Javascript is executed twice, it seems like it would create duplicate bindings. Add a `console.log` inside of each of your events so you know when they're firing. It's possible you only need to run this block of JS on the initial page load. – kevinthompson Jun 30 '15 at 04:10
  • Ok I placed script in
    It executes once on load. And it gets executed again once I redirect to page 10 . I guess it has something to do with how jquery mobile updates pages. Using ajax I presume. But I still dont know how I should handle this.     – Paran0a Jun 30 '15 at 06:19
  • http://stackoverflow.com/questions/8684234/how-to-disable-ajax-in-jquery-mobile-before-page-load Here's what helped me $.mobile.ajaxEnabled = false; This is what I added after my pageinit. Now it doesn't use ajax for redirect so my code get binded after each redirect. – Paran0a Jun 30 '15 at 06:43

0 Answers0