Aarón Gutiérrez Aarón Gutiérrez - 4 months ago 9
jQuery Question

issue on dropdown li menu

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

fantasyLink
id, and I want that when it is clicked, the
li
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 (){
$('body').find('#dropLogin').click();
});
});

<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">
<li>
<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">
Facebook
</fb:login-button>
</div>





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

Answer

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.

Comments