Dynamisch hinzugefügtes Element nach Clickevent ansprechen

[Jan-Frederik Stieler]

Ich bekomm grad zuviel. ich hab eine kleine Funktion für ein Tooltip geschrieben und hab einige Problem mit einem dynamisch hinzugefügt Div.
Hier mein jsBin.
Erstens erkennt das Script nicht das ob .length zutrifft und ich kann tooltipContainer nicht ansprechen.

Bei einem Event würde ich das Element delegieren aber wie bekomm ich das Element den im Callback des Clickevents angesprochen?

Grüße

 

[Sempervivum]

Offensichtlich ist die Liste, die Du in tooltipContainer anlegst, nicht live. Verschiebe ich das in den Klick-Handler, funktioniert es:

function dtgTooltip(){
    console.warn('tooltip loaded');
    let tooltipConstruct = '<div id="" class="dtg-tooltip-container"></div>';
    let tooltipLink      = jQuery('.dtg-tooltip');
    // let tooltipContainer = jQuery('.dtg-tooltip-container');

    tooltipLink.on('click', function(){
        let tooltipContainer = jQuery('.dtg-tooltip-container')
        if(tooltipContainer.length){
            jQuery(tooltipContainer).fadeOut('slow', function(){
                jQuery(this).remove();
                console.log('tooltip hide');
            })
        }
        else {
            jQuery(this).after(tooltipConstruct);
            tooltipContainer.addClass('fadein');
            console.log('tooltip show');
        }
    });
}

jQuery(function(){
    dtgTooltip();
});

Außerdem musste ich den Tooltipp sichtbar machen, damit es funktioniert:

    &tooltip-container {
        /*display: none;*/
        position: absolute;
        width: 300px;

 

[Jan-Frederik Stieler]

Hi,
vielen Dank. Dann liegt das an dem scope von let. Hab da jetzt garnicht dran gedacht.
Das display: none; muss raus. War noch drinnen von vorher drinnen. Aber das war jetzt für meinen Fehler irrelevant.

Grüße