66

このページには、jQuery ポップアップ ウィンドウとサムネイルのサイズ変更可能な画像があります。サムネイルにマウスを合わせると、画像のサイズが完全に変更されます。また、フッターにある大きな黄色の TV ボタン「QuickBook TV」をクリックすると、思い通りにポップアップが表示されます。

ただし、[次へ] または [前へ] ボタンをクリックすると、AJAX を使用して新しいコンテンツが読み込まれ、jQuery がポップアップまたはサムネイル画像に対して機能しなくなります。この問題に関する情報を求めて多くのフォーラムを検索しましたが、jQuery に関する知識が限られているため、何をする必要があるのか​​理解できませんでした。

以下はポップアップjQueryです

$(document).ready(function() {

        $(".iframe").colorbox({ iframe: true, width: "1000px", height: "500px" });
        $(".inline").colorbox({ inline: true, width: "50%" });
        $(".callbacks").colorbox({
            onOpen: function() { alert('onOpen: colorbox is about to open'); },
            onLoad: function() { alert('onLoad: colorbox has started to load the targeted content'); },
            onComplete: function() { alert('onComplete: colorbox has displayed the loaded content'); },
            onCleanup: function() { alert('onCleanup: colorbox has begun the close process'); },
            onClosed: function() { alert('onClosed: colorbox has completely closed'); }
        });

        //Example of preserving a JavaScript event for inline calls.
        $("#click").click(function() {
            $('#click').css({ "background-color": "#f00", "color": "#fff", "cursor": "inherit" }).text("Open this window again and this message will still be here.");
            return false;
        });
    });

そして、これはサムネイルjQueryです

$(function() {

var xwidth = ($('.image-popout img').width())/1;
var xheight = ($('.image-popout img').height())/1;

$('.image-popout img').css(
        {'width': xwidth, 'height': xheight}
); //By default set the width and height of the image.

$('.image-popout img').parent().css(
        {'width': xwidth, 'height': xheight}
);

$('.image-popout img').hover(
    function() {
        $(this).stop().animate( {
            width   : xwidth * 3,
            height  : xheight * 3,
            margin : -(xwidth/3)
            }, 200
        ); //END FUNCTION

        $(this).addClass('image-popout-shadow');

    }, //END HOVER IN
    function() {
        $(this).stop().animate( {
            width   : xwidth,
            height  : xheight,
            margin : 0
            }, 200, function() {
                $(this).removeClass('image-popout-shadow');
    }); //END FUNCTION

    }
);

});
4

9 に答える 9

126

jQuery セレクターは、コードの実行時に DOM に存在する一致する要素を選択し、動的に更新しません。イベントハンドラーを追加するなどの関数を呼び出すと、.hover()それらはそれらの要素にのみ追加されます。AJAX 呼び出しを実行し、ページのセクションを置き換える場合、これらの要素をイベント ハンドラーがバインドされた状態で削除し、新しい要素に置き換えます。これらの要素がそのセレクターに一致するようになったとしても、それを行うコードが既に実行されているため、イベント ハンドラーがバインドされません。

イベント ハンドラー

特にイベント ハンドラー (つまり.click()) の場合、イベント委任を使用してこれを回避できます。基本原則は、すべての動的 (AJAX ロード) コンテンツを含む静的 (ページのロード時に存在し、決して置き換えられない) 要素にイベント ハンドラーをバインドすることです。イベント委譲の詳細については、jQuery のドキュメントを参照してください。

clickイベント ハンドラーの場合、更新されたコードは次のようになります。

$(document).on('click', "#click", function () {
    $('#click').css({
        "background-color": "#f00",
        "color": "#fff",
        "cursor": "inherit"
    }).text("Open this window again and this message will still be here.");
    return false;
});

これにより、イベント ハンドラーがドキュメント全体にバインドされ (そのため、ページがアンロードされるまで削除されません)、のプロパティをclick持つ要素のイベントに反応します。理想的には、DOM 内の動的要素に近いものを使用することをお勧めします (おそらく、常にそこにあり、すべてのページ コンテンツを含むページ上の )。これにより、効率が少し向上します。idclick<div>

ただし、問題は を処理する必要がある場合に発生します.hover()。hoverJavaScript には実際のイベントはありません。jQuery は、イベント ハンドラーをmouseenterおよびmouseleaveイベントにバインドするための便利な省略形としてその関数を提供しているだけです。ただし、イベント委任を使用できます。

$(document).on({
    mouseenter: function () {
        $(this).stop().animate({
            width: xwidth * 3,
            height: xheight * 3,
            margin: -(xwidth / 3)
        }, 200); //END FUNCTION

        $(this).addClass('image-popout-shadow');
    },
    mouseleave: function () {
        $(this).stop().animate({
            width: xwidth,
            height: xheight,
            margin: 0
        }, 200, function () {
            $(this).removeClass('image-popout-shadow');
        }); //END FUNCTION

    }
}, '.image-popout img');

jQuery プラグイン

これは、イベント ハンドラーのバインドをカバーしています。しかし、それだけではありません。また、jQuery プラグイン (カラーボックス) を初期化しますが、それらを要素に委任する方法はありません。AJAX コンテンツをロードしたら、これらの行を再度呼び出す必要があります。success最も簡単な方法は、それらを別の名前付き関数に移動して、両方の場所 (ページの読み込み時と AJAX 要求のコールバック内)で呼び出すことができるようにすることです。

function initialiseColorbox() {
    $(".iframe").colorbox({
        iframe: true,
        width: "1000px",
        height: "500px"
    });
    $(".inline").colorbox({
        inline: true,
        width: "50%"
    });
    $(".callbacks").colorbox({
        onOpen: function () {
            alert('onOpen: colorbox is about to open');
        },
        onLoad: function () {
            alert('onLoad: colorbox has started to load the targeted content');
        },
        onComplete: function () {
            alert('onComplete: colorbox has displayed the loaded content');
        },
        onCleanup: function () {
            alert('onCleanup: colorbox has begun the close process');
        },
        onClosed: function () {
            alert('onClosed: colorbox has completely closed');
        }
    });
}
于 2013-04-17T14:46:59.273 に答える
4 
// EXAMPLE FOR JQUERY AJAX COMPLETE FUNC.
$.ajax({
    // get a form template first
    url: "../FPFU/templates/yeni-workout-form.html",
    type: "get",
    success: function(data){
        // insert this template into your container
        $(".content").html(data);
    },
    error: function(){
        alert_fail.removeClass("gizle");
        alert_fail.addClass("goster");
        alert_fail.html("Template getirilemedi.");
    },
    complete: function(){
        // after all done you can manupulate here your new content
        // tinymce yükleme
        tinymce.init({
            selector: '#workout-aciklama'
        });
    }
于 2016-03-30T07:49:20.610 に答える
3

コンテンツを置き換えると、イベント ハンドラーが失われます。イベントを設定hoverすると、jQuery は現在ページ上のイベントにイベントを設定しています。したがって、それらをajaxに置き換えると、イベントは新しい要素であるため、それらの要素に関連付けられません.

これを修正するには、それらを再度バインドする関数を呼び出すか、代わりに$(document).on を使用してこの回答のようにドキュメントにイベント ハンドラーを設定できます。

このようにして、ドキュメントにイベントが設定され、新しい要素が呼び出されたイベントを取得します。

于 2013-04-17T14:42:38.780 に答える
0

どこかでデータフォームを取得した後、jQuery ajax の完全な機能を使用できます。ajax の完了後に更新された要素が表示されます。

于 2016-03-28T14:03:54.913 に答える