3

IE にいくつかの問題があります。Chrom/Operaなどでは問題ありませんが、IEではクリックしてtoggleClassに移動しますが、何も起こりません。cancel.bubble を実装すると役立つと思いましたが、そうではありません。

以下は 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>

そして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();
}); 

不要な/重複するコードを取り除いたので、少し読みやすくなりました。私のコードを言葉で説明するために、タイトルのクラスを持つ div があり、それをクリックして兄弟テーブルを表示/非表示にします。テーブルが表示されると、いくつかの A タグが表示され、クリックすると dateChange() が呼び出され、適切な情報が読み込まれます。表示をクリックしてテーブルを非表示にし、A タグをクリックしても IE では機能しません。他のブラウザも疑わしい。何か案は?dateChange() にイベントか何かが必要かどうかわかりませんか? これはまだ新しいハハ!事前に乾杯!

4

3 に答える 3