Jquery mobile click event binding twice

jquery, jquery-mobile

Solution

Use `stopImmediatePropagation()`, it will stop the event from bubbling through the DOM of your page:

// Index Page Onclick events

  $('body').on('click','.menuClass',function(e) {
    e.preventDefault();
    var menuid = $(this).attr('id');
    alert(menuid);        
  });

// click on groups html  >>  this page alert fires twice

$('body').on('click','.grpClass',function(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    var menuid = $(this).attr('id');
    alert(menuid);

});

Here is an example of how this works: JSFIDDLE. If you click `test1`, the bubbling is prevented and only one alert is shown. If you click `test2`, the event is not stopped and you will get two alerts.

Problem

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

Original source