0

問題があり、誰かが私を助けてくれることを願っています。

このチュートリアルを使用する: http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/ブラウザを更新せずに投稿を動的に読み込むことができます!

ここまでは順調ですね!

コードを少しカスタマイズして、jQuery Isotope に統合しました。

ここまでは順調ですね!

custom.js ファイルには、prettyPhoto 用に作成した一連の関数と、「もっと読み込む」コードで使用するスクリプト (prettyPhoto();、postlike();) などの投稿好きなスクリプトと共に、すべてのコードが含まれています。投稿が追加された後に「リロード」されます。

ここまでは順調ですね!

ちなみに、次のコードで行われます。

jQuery( '#content .isotope' ).append($newEls).isotope( 'appended', $newEls, function() {

かわいい写真(); ポストライク();

後で使用できるように関数を作成することは問題ありませんが、ここに本当の問題があります。たとえば、jplayer と flexslider 用のインライン JavaScript がたくさんありますが、投稿が追加された後にリロードできません。 jplayer と flexslider のコードは別のファイルにあるため、後で使用できる関数 (prettyphoto と postlike で行ったように)。

たとえば、Jplayer は次のコードを使用します。

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

    if(jQuery().jPlayer) {
        jQuery('#jquery_jplayer_<?php the_ID(); ?>').jPlayer({
            ready: function() {
                jQuery(this).jPlayer('setMedia', {
                    mp3: "<?php echo stripslashes(htmlspecialchars_decode($mp3)); ?>",
                    oga: "<?php echo stripslashes(htmlspecialchars_decode($ogg)); ?>",
                    end: ""
                    });
                },
            swfPath: "<?php echo get_template_directory_uri(); ?>/js/jplayer/",
            cssSelectorAncestor: "#jp_container_<?php the_ID(); ?>",
            supplied: "<?php if($mp3 != '') : ?>mp3, <?php endif; ?><?php if($ogg != '') : ?>oga, <?php endif; ?> all"
        });
    }

});
</script>

jPlayer は一意の識別子 #jquery_jplayer_ を使用して呼び出されることに注意してください。

私の質問は、この「インライン JavaScript」をリロードして、新しい投稿を動的に追加した後に機能するようにするにはどうすればよいですか?

上記が理にかなっていることを願っています。そうでない場合は、喜んで詳しく説明してください!

編集:

    jQuery( '#load-posts a' ).live( 'click', function(e) {

        // Are there more posts to load?
        if(pageNum <= max) {

            // Show that we're working.
            jQuery(this).text( 'Loading...' );


                jQuery( '#content .isotope-new' ).load(nextLink + ' .item',
                function() {



                    var $newEls = jQuery( '#content .isotope-new .item' );

                    $newEls.imagesLoaded( function(){

                    jQuery( '#content .isotope' ).append($newEls).isotope( 'appended', $newEls, function() {
4

1 に答える 1

0

最初に、古いスクリプトを削除して、2 回ロードしないようにします。クラスを再初期化するために必要なスクリプトを指定します。

<script class="my-script">

$('.my-script').remove

次に使用しますgetScript

http://api.jquery.com/jQuery.getScript/

ajaxify.js スクリプトはこれを行うのに優れているため、そのソース コードを少し調べて、どのように実行するかを確認できます: https://github.com/browserstate/ajaxify 124 行目、次に 154 行目

于 2012-08-18T19:24:25.930 に答える