简体   繁体   中英

Jquery click event is not getting triggered

Have been trying to perform a DIV hide show on a page of my website.

It was working fine with plain javascript but noticed it was not working when simulated on mobile devices..after bit of research I changed my code to the following, is there anything wrong in it ?

<script>
    $(document).ready(function() {
        var portfolioDiv = document.getElementById('portfolio');
        var resultsDiv = document.getElementById('results');

        var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
        var resultsBtn = document.getElementById('RenderResults_Btn');
        //portfolioBtn.onclick = function () resultsBtn.onclick = function ()
        $('#portfolioBtn').on('click touchstart', function() {
            resultsDiv.setAttribute('class', 'col-md-9 hidden');
            portfolioDiv.setAttribute('class', 'col-md-9 visible');
        });

        $('#resultsBtn').on('click touchstart', function() {
            portfolioDiv.setAttribute('class', 'col-md-9 hidden');
            resultsDiv.setAttribute('class', 'col-md-9 visible');
        });
    });
</script>

Here is my navbar stack, where the two options act as buttons

<div class="col-md-3 col-sm-12 col-xs-12">
    <br />
    <ul class="nav nav-stacked">
        <li style="background-color: lightgreen ; color:black;font-weight:bold"><a href="#" id="RenderPortfolio_Btn">Introduction</a>
        </li>
        <li style="background-color: lightgreen; color:black;font-weight:bold"><a href="#" id="RenderResults_Btn">Key Achievements</a>
        </li>
    </ul>
</div>

Your code is missing a comma between click and touchstart also you id selector is incorrect

 $('#RenderPortfolio_Btn').on('click, touchstart', function() {
            resultsDiv.setAttribute('class', 'col-md-9 hidden');
            portfolioDiv.setAttribute('class', 'col-md-9 visible');
        });

You are confusing variables that reference elements with jQuery selectors that select by ID. Essentially you can remove the following lines:

var portfolioBtn = document.getElementById('RenderPortfolio_Btn');
var resultsBtn = document.getElementById('RenderResults_Btn');

and then change your jQuery selectors to:

$('#RenderPortfolio_Btn').on('click touchstart', function() {

and

$('#RenderResults_Btn').on('click touchstart', function() {

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM