2016-11-30 1 views
0

Also mit diesem Bit Code möchte ich ein Overlay anzeigen, .mg-show-info. Die Klick-Funktion von elInfoLink funktioniert genauso wie geplant. Jetzt soll ich auch die Eltern klickbar machen, und da es bereits ein anderes Ereignis gibt, dachte ich, dass ich es so machen würde, wie du es hier siehst. Jetzt wird durch Klicken auf den Eltern die Funktion seines Kindes aufgerufen, und das console.log funktioniert, aber das Overlay wird nicht angezeigt. Warum?Code wird nur teilweise ausgeführt

var elInfoLink = tile.querySelector('.info-link'); 
if (elInfoLink) { 

    $(elInfoLink).parent().click(function (e) { 
     $(elInfoLink).click(); 
    }); 

    $(elInfoLink).click(function (e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    var mg = document.querySelector('#mg'); 
    mg.classList.add('mg-show-info'); 
    mg.dataset.memoryOverlayShowId = tile.dataset.id; 
    console.log("foo"); 
    }); 
} 
+1

Ich denke, es hat etwas mit Ihrem 'e.stopPropagation();' innerhalb des Codeblocks zu tun. Es stoppt die Ereignisausbreitung und erreicht dadurch nicht die Eltern. –

+0

Mögliches Duplikat von [funktioniert e.stopPropagation() in jquery auf dem Anchor-Tag] (http://stackoverflow.com/questions/8952176/does-e-stoppropagation-in-jquery-works-on-anch-tag) –

+1

@SwashataGhosh Er wird 'e.stopPropagation' brauchen. Wenn es entfernt wird, werden Sie in einem Ereigniszyklus von "Eltern -> Kind -> Eltern ..." gehen. – Rajesh

Antwort

0

EDIT: Wie @Rory McCrossan darauf hingewiesen, das ist ziemlich gleichwertig Ihre Schreibweise; und das funktioniert gut.

Die Methode .click() ist eine Abkürzung für die Registrierung eines Klickereignis-Listeners auf Ihrem Element. Was Sie tun möchten, ist:

$(elInfoLink).parent().click(function (e) { 
    $(elInfoLink).trigger('click'); 
}); 
+0

Dies ist logisch identisch mit dem, was das OP bereits hat. Siehe http://api.jquery.com/click: 'Diese Methode ist eine Abkürzung für .on (" click ", Handler) in den ersten beiden Varianten und .trigger (" click ")' –

+0

Sie haben Recht , mein Fehler! – SinDeus

0

Gut aus dem begrenzten Code, es sieht aus wie es keine „Teilausführung“ ist hier. Ich würde erneut überprüfen, ob die Klasse mg-show-info dem richtigen Element hinzugefügt wird (und ob dieses Element ordnungsgemäß ausgewählt ist) und dass das relevante CSS geladen wird.

Verwandte Themen