jquery - stopPropagation() not working in IE -

having issues in ie. things fin in chrom/opera etc. in ie go click , toggleclass nothing happens. thought implementing cancel.bubble me not case.

following html:

<div class="title">   <h2>catamarans</h2>   <div class="dateselect">     <div class="prev">       <p>prev</p>       <a href="#" onclick="datechange('formatteddate')">< month</a> </div>     <div class="next">       <p>next</p>       <a href="#" onclick="datechange('formatteddate')">month ></a>      </div>   </div> 

and in jquery

function datechange(dateinput){     //creating new instance of date based on date passed function       var nextday = new date(dateinput);    //the date change according date passed in 1 day 1 month nextday.setdate(nextday.getdate()+1);  //the following go function formats date in such way vbscript can handle it. nextday = dateformat(nextday);  //updating values tag in onclick attribute. , appending strvar variable var strvar=""; strvar += "             <div class=\"prev\">"; strvar += "                    <p>prev<\/p>"; strvar += "                    <a href=\"javascript:void(0)\" onclick=\"datechange('"+prevmonth+"')\">< month<\/a>"; strvar += "                    <a href=\"javascript:void(0)\" onclick=\"datechange('"+prevweek+"')\">< week<\/a>"; strvar += "                    <a href=\"javascript:void(0)\" onclick=\"datechange('"+prevday+"')\">< day<\/a>"; strvar += "                <\/div>"; strvar += "                "; strvar += "                <div class=\"next\">"; strvar += "                 <p>next<\/p>"; strvar += "                    <a href=\"javascript:void(0)\" onclick=\"datechange('"+nextmonth+"')\">month ><\/a>"; strvar += "                    <a href=\"javascript:void(0)\" onclick=\"datechange('"+nextweek+"')\">week ><\/a>"; strvar += "                    <a href=\"javascript:void(0)\" onclick=\"datechange('"+nextday+"')\">day ><\/a>"; strvar += "                <\/div>";   //for each .title finds, child .dateselect , remove .dateselect child. append new data .dateselect updated values $(".title").each(function(index, element) {     $(this).find('.dateselect').children().remove();     $(this).find('.dateselect').append(strvar);      var boatname = $(this).next().attr('id');       if(!$(this).next().hasclass('hide')){           if(boatname == "sailingcatamaran"){               $(this).next().load("availability.asp?boattype=sailingcatamaran&date="+dateinput+"");               //alert(dateinput);           }           else if(boatname == "powercatamaran"){               $(this).next().load("availability.asp?boattype=powercatamaran&date="+dateinput+"");           }           else{               $(this).next().load("availability.asp?boattype=nothing&date="+dateinput+"");           }       } }); //stops propagation when day,week or month clicked, table won't disappear  event.stoppropagation();  }  $(document).ready(function() {  /*$("table").first().load("availability.asp?boattype=powercatamaran&date="+current+"", function(response, status, xhr){     if (status == "error") {         var msg = "sorry there error: ";         $("table").html(msg + xhr.status + " " + xhr.statustext);     } });*/  $(".title").click(function(event){     $(this).next().toggleclass("hide");   var boatname = $(this).next().attr('id');   if(!$(this).next().hasclass('hide')){       if(boatname == "sailingcatamaran"){            $(this).next().load("availability.asp?boattype=sailingcatamaran&date=");       }       else if(boatname == "powercatamaran"){            $(this).next().load("availability.asp?boattype=powercatamaran&date=");       }       else{            $(this).next().load("availability.asp?boattype=sailingmonohull&date=");       }   }   $(this).children().last().toggleclass("hide");   $(this).find('.dateselect').toggleclass("hide");   //alert("title being clicked"); });  event.stoppropagation(); });  

i have stripped out unneccessary/duplicate code it's little easier read. explain code in words, have div class of title, click show/hide sibling table. when table shown see tags , when clicked call datechange() load appropriate infomation. clicking show hide table , clicking tag doesn't work in ie. suspect other browsers too. ideas? i'm not sure if datechange() needs event or something? still new haha! cheers in advance!

it seems issue caused difference in handling of event object in ie. in ie9 , before, event object not local variable in event handler's context, instead global variable.

instead of directly calling event.stoppropagation(), try first:

event = event || window.event; event.stoppropagation(); 

ie9 apparently populates window.event object instead of local variable.

---

a better way use jquery bind events buttons, , never use onclick attribute in html. pointed out in comments, jquery normalize event object can accessed common interface. example of be:

html:

<a href="#" id="prevmonthbtn">&lt; month</a> 

javascript jquery:

$("#prevmonthbtn").click(datechange); 

you can find alternative way pass arguments formatteddate in.