jQuery werkt niet nadat inhoud is geladen via AJAX

Op deze paginaIk heb een jQuery-pop-upvenster en miniatuurafbeeldingen waarvan de grootte kan worden aangepast. Als ik met de muis over de miniaturen ga, worden de afbeeldingen perfect vergroot of verkleind. Ook als ik op de grote gele TV-knop “QuickBook TV” in de footer klik, verschijnt de pop-up perfect zoals ik het wil.

Als ik echter op de knoppen “Volgende” of “Vorige” klik, wordt AJAX gebruikt om de nieuwe inhoud te laden en werkt mijn jQuery niet langer voor de pop-up- of miniatuurafbeeldingen. Ik heb een aantal forums doorzocht op zoek naar informatie over dit probleem, maar vanwege mijn beperkte kennis van jQuery heb ik niet kunnen begrijpen wat ik moet doen.

Hierna volgt de pop-up 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;
        });
    });

En dit zijn de thumbnails 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
    }
);
});

Antwoord 1, autoriteit 100%

jQuery-selectors selecteren overeenkomende elementen die in het DOM aanwezig zijn wanneer de code wordt uitgevoerd, en worden niet dynamisch bijgewerkt. Wanneer je een functie aanroept, zoals .hover()om event-handler(s) toe te voegen, worden deze alleen aan die elementen toegevoegd. Wanneer u een AJAX-aanroep doet en een gedeelte van uw pagina vervangt, verwijdert u die elementen met de gebeurtenishandlers eraan gebonden en vervangt u ze door nieuwe elementen. Zelfs als die elementen nu overeenkomen met die selector, krijgen ze de gebeurtenishandler niet gebonden omdat de code om dat te doen al is uitgevoerd.

Event-handlers

Specifiek voor gebeurtenishandlers (d.w.z. .click()) kunt u gebeurtenisdelegatie gebruiken om dit te omzeilen. Het basisprincipe is dat je een event handler bindt aan een statisch (bestaat wanneer de pagina wordt geladen, wordt nooit vervangen) element dat al je dynamische (AJAX geladen) inhoud zal bevatten. U kunt meer lezen over het delegeren van evenementen in de jQuery-documentatie.

Voor uw click-gebeurtenishandler ziet de bijgewerkte code er als volgt uit:

$(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;
});

Dat zou een event-handler aan het hele document binden (en wordt dus nooit verwijderd totdat de pagina is verwijderd), die zal reageren op click-gebeurtenissen op een element met de ideigenschap van click. Idealiter zou je iets gebruiken dat dichter bij je dynamische elementen in de DOM ligt (misschien een <div>op je pagina die er altijd is en al je pagina-inhoud bevat), omdat dat de efficiëntie zal verbeteren een beetje.

Het probleem doet zich echter voor wanneer u .hover()moet afhandelen. Er is geen daadwerkelijke hover-gebeurtenis in JavaScript, jQuery biedt die functie alleen als een handige afkorting voor het binden van gebeurtenis-handlers aan de gebeurtenissen mouseenteren mouseleave. U kunt echter gebeurtenisdelegatie gebruiken:

$(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-plug-ins

Dat dekt de event handler bindingen. Dat is echter niet het enige wat je doet. Je initialiseert ook een jQuery-plug-in (colorbox), en er is geen manier om die aan elementen te delegeren. Je zult die regels gewoon opnieuw moeten aanroepen als je je AJAX-inhoud hebt geladen; de eenvoudigste manier zou zijn om die naar een afzonderlijke benoemde functie te verplaatsen die u vervolgens op beide plaatsen kunt aanroepen (bij het laden van de pagina en in uw AJAX-verzoeken successcallback):

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');
        }
    });
}

Antwoord 2, autoriteit 23%

Had hetzelfde probleem voordat ik de oplossing vond die voor mij werkte.
Dus als iemand in de toekomst het eens kan proberen en me laat weten of het juist was, aangezien alle oplossingen die ik kon vinden iets gecompliceerder waren dan dit.

Zoals gezegd door Tamer Durgun, zullen we uw code ook in ajaxStop plaatsen, zodat uw code wordt hersteld telkens wanneer een evenement door ajax wordt voltooid.

$( document ).ajaxStop(function() {
//your code
}

Werkt voor mij 🙂


Antwoord 3, autoriteit 3%

// 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'
        });
    }

Antwoord 4, autoriteit 2%

Je event-handlers gaan verloren wanneer je de inhoud vervangt. Wanneer u uw hover-gebeurtenissen instelt, stelt jQuery ze in op de gebeurtenissen op de pagina die momenteel staan. Dus als je ze vervangt door ajax, worden de gebeurtenissen niet geassocieerd met die elementen omdat ze nieuw zijn.

Om dit op te lossen kun je ofwel de functie aanroepen die ze opnieuw bindt of je kunt in plaats daarvan de gebeurtenishandler op het document instellen zoals in deze beantwoordenmet $(document).on

Op die manier wordt de gebeurtenis op het document gezet en krijgen alle nieuwe elementen de gebeurtenis aangeroepen.


Antwoord 5

U kunt de delegate()-methode van jQuery gebruiken die een handler aan een of meer gebeurtenissen koppelt voor alle elementen die overeenkomen met de selector, nu of in de toekomst, op basis van een specifieke set root-elementen. In mijn geval werkt het zoals verwacht

deze $(selector).click(function(e){}

word dit na het gebruik van de delegate()methode

$( "body" ).delegate( "selector", "click", function(e) {}

Hopelijk helpt dit 😉


Antwoord 6

Je kunt de volledige functie van jQuery ajax gebruiken nadat je ergens een gegevensformulier hebt opgehaald, het zal bijgewerkte elementen zien nadat ajax is voltooid


Antwoord 7

Dit werkte voor mij,

in plaats van:

$(document).ready(function(){
//code
});

Ik deed:

$(document).on('mouseenter', function(){
//code
});

Antwoord 8

Ik ben te laat op het feest, maar ik zou twee antwoorden combineren. Wat voor mijn specifieke behoeften werkte, was om de ajaxstop op te nemen in de volledige

complete: function () {
     $( document ).ajaxStop(function() {
         //now that all have been added to the dom, you can put in some code for your needs.
         console.log($(".subareafilterActive").get().length)
     })
}

Antwoord 9

Gewoon een alternatief.

$(window).on('load', _ => {
    // some jQuery code ..
})

Dit bindt elke gedelegeerde handler aan het venster. Het wordt geactiveerd zodra het venster volledig is geladen, inclusief alle afbeeldingen/inclusief/haken/verzoeken, niet alleen de DOM.

$(document).ready(_ => ...bewaart gebeurtenissen die moeten worden gestart nadat alleen de DOM gereed is, wat niet van toepassing is op dynamisch geladen inhoud door AJAX. Ofwel kunt u uitvoeren een functie of een gebeurtenis wanneer een specifiek element volledig is geladen door het te definiëren zoals @Anthony Grist heeft uitgelegd in zijn antwoord of bind uw laadgebeurtenis aan het venster zoals hierboven weergegeven.

https://api.jquery.com/load-event/

https://api.jquery.com/on/#on- events-selector-data-handler

Other episodes