Jquery click event is not getting triggered

Question

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>

sorry I did not get you , do you mean to say i have to replace document.getElementById('RenderPortfolio_Btn'); with $('RenderPortfolio_Btn') ? — santhoshkumar B, Mar 02 '16 at 19:18
No, you have made a variable, `portfolioBtn` that references an element. If you want jQuery to use that variable, you shouldn't enclose it with quotes with a hash--that is the way to use jQuery to select an element by ID. You either need to use `$("#RenderPortfolio_Btn")` or `$(portfolioBtn)`. One of the primary points of using jQuery is that you can eliminate the `var variable = document.getElementById` crap, and you can select the element(s) AND perform a number of operations or apply filters or traversals all in one line. — Tony Hinkle, Mar 02 '16 at 19:41
awesome, Tony am new to jquery, and code is working now but still not working on mobile simulators :( — santhoshkumar B, Mar 02 '16 at 19:50

Ashkan Mobayen Khiabani · Answer 1 · 2016-03-02T19:50:12.657

1

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

edited Mar 02 '16 at 19:50

answered Mar 02 '16 at 19:19

Ashkan Mobayen Khiabani

33,575
33
102
171

Hi, Thank you, tried adding a comma separator after click however issue is still persisting , no trigger – santhoshkumar B Mar 02 '16 at 19:23
@santhoshkumarB where is the button with id=`portfolioBtn`? – Ashkan Mobayen Khiabani Mar 02 '16 at 19:25
I think there must be a problem with id selector – Ashkan Mobayen Khiabani Mar 02 '16 at 19:26
you can see in the above code, in the col-md-3, i have two li, each with id – santhoshkumar B Mar 02 '16 at 19:31
have a look at your rendered html, to see if the id is the same as your selector, your, I think your selector id should have a underline. – Ashkan Mobayen Khiabani Mar 02 '16 at 19:35
Hi, I just checked the two li elements inside col-md-3, i can see that href is being shown as "#" with underline, i can see nothing else underlined apart from that,now ? – santhoshkumar B Mar 02 '16 at 19:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/105186/discussion-between-santhoshkumar-b-and-ashkan-mobayen-khiabani). – santhoshkumar B Mar 02 '16 at 19:43

Tony Hinkle · Accepted Answer · 2016-03-02T20:08:17.950

1

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

edited Mar 02 '16 at 20:08

answered Mar 02 '16 at 19:45

Tony Hinkle

4,706
7
23
35

Thank you for your time Tony, strange case here, when i remove the comma between click and touchstart it starts working in the browser but fails to work in the mobile platform ..i replaced the code like you said – santhoshkumar B Mar 02 '16 at 20:00
1

I did not check the facts of the other answer--the commas are incorrect and I have removed them. http://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function – Tony Hinkle Mar 02 '16 at 20:08
I just set up the exact same thing on a web page, and I tested it on my android phone and it worked. The only thing I can think of is that the emulator you are using isn't working like it is expected to. – Tony Hinkle Mar 02 '16 at 20:16
if that is a possibility then i am little relieved.. :) hope it works for me too...do you think there is any other solution to get this working on mobile ? so i can keep it ready #failover – santhoshkumar B Mar 02 '16 at 20:28
I wouldn't know what else to do other than to try a different emulator. I have not used mobile emulators for testing so I don't have any specific ideas. – Tony Hinkle Mar 02 '16 at 20:54
Also let me clarify--I did not test it as a navbar. I just created an `` element with an ID, and the "click touchstart" handler. – Tony Hinkle Mar 02 '16 at 20:55
hello Tony, It is working only in the desktop browser and not on the smartphone browser..anyways thank you for your help on this tony – santhoshkumar B Mar 03 '16 at 06:38

Jquery click event is not getting triggered

2 Answers2