Aarón Gutiérrez Aarón Gutiérrez - 11 months ago 47
jQuery Question

issue on dropdown li menu

I have the following javascript and the following HTML excerpt code. I have an element with the

id, and I want that when it is clicked, the
dropdown shows but it doesn't do anything, but when I run the code on console, it does the action. The clicked element is circled in the image.

enter image description here

enter image description here

$(document).ready(function () {
$('#fantasyLink').on('click', function (){

<li class="dropdown" id="linkLogin">
<a id="dropLogin" href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a>
<ul id="login-dp" class="dropdown-menu">
<div class="row">
<div class="col-md-12">
<div id="message"></div>
<label class="label-login">Iniciar sesión con:</label>
<div class="social-buttons">
<fb:login-button scope="public_profile,email" data-size="xlarge" onlogin="checkLoginState();" class="btn">

NOTE: I have also tried using trigger, adding the
class to the
element so it shows, toggle the class, none of them working...


I just got it to work

$('#fantasyLink').on('click', function (e){ e.stopPropagation(); $('#dropLogin').trigger( "click" ); }

That stopPropagation seems to make the trick, but if someone could explain the reason, it would be appreciated.