jqueryスクリプトはページロード時のみ動作します

Question

私は奇妙な問題があります。私は理解できないようです。 フェード/トグルの別のレイヤーを備えたボタンを備えたJoomlaテンプレートに取り組んでいます。 使用されるスクリプトは超簡単で、一般的です：

ボタン：<button style="text-align: center;" id="button" class="btn btn-lg btn-success btn_daytours" data-ap-original-font-size="18px">Click here</button>

層：<div class="tour_calendar" style="display: none;"><div class="moduletable span12">...</div></div>

スクリプト：// TOGGLE層

$(window).load(function(){ 
    $("#button").click(function(){ 
     $("#tour_calendar").fadeToggle(); 
$(this).toggleClass("active"); return false; 
    }); 
}); 

...と間違って何も思いませんその設定では問題はありませんが、スクリプトがページがロードされている間だけ動作するということです。一度完全にロードされると、それ以上応答しません。 コード内の別の場所に関数を配置しようとしましたが、問題は解決しません。 私は実際にコーダーではなく、火かき棒は衝突を表示しないので、ヒントは高く評価されます。 自身のために試してみてください：https://biz211.inmotionhosting.com/~blackb78/blackbear2017/

とありがとうを事前に

Answer 1

$(window).load(function() {});を削除してみて、ちょうど直接このコードを置きます。

$("#button").click(function(){ 
    $("#tour_calendar").fadeToggle(); 
    $(this).toggleClass("active"); 
    return false; 
}); 

お試しください。

Answer 2

$(window).load(function() { ... });が無効になり、​​が機能を変更しても、ajax処理機能になります。変更する

試してみてください。

$(window).on('load',function() { ... });

Answer 3

ID "tour_element" とは要素はないように思えます。代わりに、クラス "tour_element"を持つ要素があります。ですから、$("#tour_calendar").fadeToggle();を$(".tour_calendar").fadeToggle();に変更することをお勧めします。その後、

Answer 4

$("#button").click(function(){ 
$("#tour_calendar").fadeToggle(); 
$(this).toggleClass("active"); return false; 
}); 

$(window).load(function(){ 
$("#button").trigger("click"); 
}); 

あなたには、いくつかの他の場所の例をしたい場合は、

$(document).bind(function()){ 
$("#button").trigger("click"); 
} 

他の場所ちょうどそれが

関数内

$("#button").trigger("click"); 

のthatsを次のコードを使用します