Question

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?

Answer 1

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.