title: Jquery mobile click event binding twice
body: <p>I have two html pages one <code>index.html</code> and <code>groups.html</code> each page as <strong>ul > li > a</strong> list 
  with different class names.</p>
  
  <p>I have place the click events in a seperate js file as following : </p>
  
  <pre><code>// Index Page Onclick events
  
    $('body').on('click','.menuClass',function(e) {
      e.preventDefault();
      var menuid = $(this).attr('id');
      alert(menuid);        
    });
  
  // click on groups html  &gt;&gt;  this page alert fires twice
  
  $('body').on('click','.grpClass',function(e) {
      e.preventDefault();
      var menuid = $(this).attr('id');
      alert(menuid);
  
  });
  </code></pre>
  
  <p>the script file is loaded in both the html files the second function for groups.html fires the click event twice.</p>
  
  <p>Is there any way to avoid it or any better way to achieve the same?</p>