CODEWITHSUNDEEP
javascriptjquery
Code Lover
Code Lover

Reputation: 8348

jQUery preventDefault or stopPropagation() not working with toggle form

I am making login form dropdown. When user click on login item the dropdown form will open. The issue is it is closing as soon as click on form or its element.

I have tried below code but not working

if ($('.auth').length) {
    $('.auth').click(function (event) {
        $(this).toggleClass('auth-active');
        $('.el-auth-box').toggle();
        //event.stopPropagation(); // not working
        event.preventDefault(); // not working
        //event.stopImmediatePropagation(); // not working
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="auth auth-active">
    <li class="auth-power">
        <i class="material-icons">power_settings_new</i>
        <ul class="el-auth-box" style="display: block;">
            <li class="el-auth-box-items">
                <form action="#" method="post">
                    <input dir="auto" name="emailhandle" placeholder="Email or Username" type="text">
                        <input dir="auto" name="password" placeholder="Password" type="password">
                            <div class="checkbox">
                                <input id="el-rememberme" name="remember" type="checkbox" value="1">
                                    <label for="el-rememberme">Remember</label>
                                </input>
                            </div>
                            <input name="csfr_code" type="hidden" value="0-1548314066-7814ce8b50bba9749389fdf8e76639a317c55c14">
                                <input class="el-form-tall-button el-form-tall-button-login" name="dologin" type="submit" value="Login"></input>
                            </input>
                        </input>
                    </input>
                </form>                
            </li>
        </ul>
        <!-- el-auth-box -->
    </li>
    <!-- el-auth-box-items -->
</ul>

Upvotes: 0

Views: 61

Answers (1)

Minh Nguyen
Minh Nguyen

Reputation: 363

You can set event click for i element. Try it:

if ($('.auth').length) {
    $('.auth i').click(function (event) {
        $(this).toggleClass('auth-active');
        $('.el-auth-box').toggle();
        //event.stopPropagation(); // not working
        event.preventDefault(); // not working
        //event.stopImmediatePropagation(); // not working
    });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="auth auth-active">
    <li class="auth-power">
        <i class="material-icons">power_settings_new</i>
        <ul class="el-auth-box" style="display: block;">
            <li class="el-auth-box-items">
                <form action="#" method="post">
                    <input dir="auto" name="emailhandle" placeholder="Email or Username" type="text">
                        <input dir="auto" name="password" placeholder="Password" type="password">
                            <div class="checkbox">
                                <input id="el-rememberme" name="remember" type="checkbox" value="1">
                                    <label for="el-rememberme">Remember</label>
                                </input>
                            </div>
                            <input name="csfr_code" type="hidden" value="0-1548314066-7814ce8b50bba9749389fdf8e76639a317c55c14">
                                <input class="el-form-tall-button el-form-tall-button-login" name="dologin" type="submit" value="Login"></input>
                            </input>
                        </input>
                    </input>
                </form>                
            </li>
        </ul>
        <!-- el-auth-box -->
    </li>
    <!-- el-auth-box-items -->
</ul>

Upvotes: 1

Related Questions