3

Having some issues in IE. Things are fin in Chrom/Opera etc. But in IE I go to click and toggleClass but nothing happens. I thought implementing cancel.bubble would help me but that is not the case.

Following is the 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 the JQuery

function dateChange(dateInput){
    //creating new instance of the date based on the date passed into the function  
    var nextDay = new Date(dateInput); 


//the date will change according to the date passed in from 1 day to 1 month
nextDay.setDate(nextDay.getDate()+1);

//The following will go into another function which formats the date in such a way that vbscript can handle it.
nextDay = dateFormat(nextDay);

//updating the values for the a tag in the onclick attribute. and appending to the 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 it finds, it will look for its child .dateselect and remove .dateselect child. It will then append new data to .dateselect with the 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 so when day,week or month are clicked, the 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 but there was an 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 so it's a little easier to read. To explain my code in words, I have a div with a class of title, you click it to show/hide its sibling table. when table is shown you will see some A tags and when clicked it will call dateChange() load up the appropriate infomation. the clicking to show hide the table and clicking the A tag doesn't work in IE. I suspect other browsers too. Any ideas? I'm not sure if dateChange() needs an event or something? Still new to this haha! Cheers in advance!

4

3 回答 3

4

您的问题似乎是由eventIE 中对象处理的差异引起的。在 IE9 及之前的版本中，事件对象不是事件处理程序上下文中的局部变量，而是全局变量。

不要直接调用event.stopPropagation()，而是先尝试这样做：

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

IE9 显然填充window.event对象而不是局部变量。

更好的方法是使用 jQuery 将事件绑定到按钮，并且永远不要onclick在 HTML 中使用该属性。正如评论中所指出的，jQuery 将规范化事件对象，以便可以从公共接口访问它。这方面的一个例子是：

HTML：

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

带有 jQ​​uery 的 Javascript：

$("#prevMonthBtn").click(dateChange);

您可以找到另一种方法来传递参数formattedDate。

于 2013-07-24T05:15:51.837 回答
1

这里发生的是该事件不在 dateChange 的范围内。这在某些浏览器中有效，因为它们使调用dateChange的函数可以使用它，但 IE 不这样做。

问题的根源在于您没有“正确”附加链接。最好不要像使用setVar那样生成 html ，而是使用 jQuery 生成 DOM 元素，如下所示：

var $prev_container = $( '<div>' )
  .addClass( 'prev' )
  .appendTo( $(this).find('.dateSelect') );

var $prev_month_link = $( '<a>' )
  .html( "month" )
  .click(function(event){
    dateChange( prevMonth ) // I'm not sure where prevMonth comes from, but I would pass it in to dateChange explicitly
    event.stopPropagation();
  })
  .appendTo( $prev_container )

  // and so on for the other links

这样做的原因是您可以完全控制事件处理函数的范围，同时将标记与 javascript 分离。

我认为在大多数情况下，当您发现自己使用 onClick 并从 js 编写标记时，您必须停下来考虑一下，因为几乎总有一种方法可以通过直接与 DOM 交互来做到这一点。

我希望这会有所帮助！

于 2013-07-24T05:53:48.203 回答
1

//event.stopPropagation(); --> 注释这一行

//添加下一行

(event.stopPropagation) ? event.stopPropagation() : event.cancelBubble = true;

于 2017-10-16T18:13:59.790 回答