2012-02-08 8 views
0

よくあるjQueryプルンインで、近くにHTMLがある画像を表示するのに問題があります。Galleriffic:内部のオブジェクトを参照するJqueryコードの前にロードされます

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".my_button").click(function(){ 
    $.get("page.php",function(data) 
    { 
     $('#mydiv').html(data); 
    }); 
    }); 
}); 
</script> 

問題は、jQueryのコードということです:<head></head>タグの間​​

、私はこのjQueryのコードを持っています。このHTMLで

、私はボタンとして使用するイメージを持っていますの前にゴールキーパーがあるので、$(".my_button").click(){}イベントがロードされているときにボタンはありません。

jqueryコードの前にGallerifficを強制的にロードする方法はありますか?ここで

は、可能な限り、より明確にするためにいくつかのコードです:

<script type="text/javascript"> 
$(document).ready(function() { 

$(".my_button").click(function(){ 

$.get("pagea.php",function(data) 
{ 

$('#mydiv').html(data); 
}); 
}); 
}); 
</script> 

///some html 

<script type="text/javascript" src="Galleria Borse/js/jquery.history.js"></script> 
// Galleriffic libraries calls 
<!-- We only want the thunbnails to display when javascript is disabled --> 
<script type="text/javascript"> 
document.write('<style>.noscript { display: none; }</style>'); 
</script> 

<div class="navigation-container"> 
<div id="thumbs" class="navigation"> 
<a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a> 
<ul class="thumbs noscript"> 
//and other galleriffic containers and divs 
<img class="my_button" src="img/button.gif" /> //this is the button 

<script type="text/javascript"> 
jQuery(document).ready(function($) { //some Galleriffic code (Jquery code) } 

私はどこにでもコード$(".my_button").click(function(){});を入れてみました:体内、ページの一番下にあるとさえGallerifficライブラリへ。少し遅れて

jQuery(document).ready(function($) { 
    //some Galleriffic code (Jquery code) 
    // Initialize Minimal Galleriffic Gallery 
    $('#thumbs').galleriffic({ 
    imageContainerSel:  '#slideshow', 
    controlsContainerSel: '#controls' 
    }); 
    $(".my_button").click(function(){ 
    $.get("pagea.php",function(data){ 
     $('#mydiv').html(data); 
    }); 
    }); 
}); 

答えて

0

あなたはこれを試してみました。そこにこれを行うためのソリューションであり、あなたも

$(document).ready();

にコードを置くことができる問題である、あなたは、イベントをクリックしバインドするとき、バインドするものは何もないことを、言ったようにそれに。ですから、別のものにバインドしてみてはどうでしょうか。 jQueryの1.7(またはそう)以来

.on()

で働かがあります。このバージョンでは、.onは.bind、.delegate、.liveの機能も持っていました。 私たちは.delegateなスタイルに興味があります:)。

だから、何の代わり

$(".my_button").click(function(){}) 

使用

$('#foo').on('click','.my_button', function(){}) 

はあなたが初めからページ上にある何でも、(可能#fooから.on eventを、結合していること、です例えば$(document)と言うことができます)。そしてharcore 『「あなたには、いくつかの.my_button

.my_buttonが最終的に到着したとき、それは:)動作することを、意味します。クリックところで、これはGallerifficで別の問題を解決するための方法です見たときに、トリガクリックイベントを』と言ってカスタマイズ::)これは、ギャラリーリーダーがそれらの構造を削除して追加しているため、メインスライドショーイメージ(またはそのラッパー)にアクションをアタッチする唯一の方法です。

+0

私がしようとしたが、ボタンが表示される前に、jqueryのコードはまだロードし、「prev_photo」と「next_photo」のリンクが、Galleriffic後、残りのこの時間負荷が私のコードの後に​​ロードされます。 Howefer私は//初期化高度なGallerifficギャラリー_の代わりに持っている:私は解決策を発見した –

+0

...それが有用であることができるかどうか// ... _最小Gallerifficギャラリーを初期化し、あなたの例よりも多くのコードを、それはとてもエレガントではありませんそれは動作します。 まず最初に、(ドキュメント).ready(function($))の代わりに$(window).load(function())にjqueryコードを入れて、ページ全体が読み込まれた後に実行します。 しかし、イベントがロードされた最初のボタンだけにバインドされたため、ボタンが動作するように停止しGallerifficの内容で写真を変更しました。 はこれを解決するために、私はまた、直前に「機能pageload(ハッシュ)」 と呼ばれるGalleriffic機能で私のjQueryのコードを入れて –

+0

は、この後、午前中と午後半分を過ごしましたが、これは誰かにとって有用であることが唯一の願っています;)返信文は、私がGallerifficの内容を変更するたびに更新されます。 –

0

、とにかく:):

関連する問題