CODEWITHSUNDEEP
javascriptjqueryhtmlmobile
santhoshkumar B
santhoshkumar B

Reputation: 103

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>

Upvotes: 0

Views: 55

Answers (2)

Tony Hinkle
Tony Hinkle

Reputation: 4742

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() {

Upvotes: 1

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34180

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');
        });

Upvotes: 1

Related Questions