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() にイベントか何かが必要かどうかわかりませんか? これはまだ新しいハハ!事前に乾杯!