13 Replies - 319 Views - Last Post: 30 May 2019 - 05:23 PM

#1 ianquiksilver   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-May 19

jQ .click() not working in chrome

Posted 30 May 2019 - 06:21 AM

Hello all! I just today found out that apparently Chrome has issues with click events, mostly in the case of jQuery syntax from what I can tell based on searches.

I've minimized my page to only include the bare minimum. The click action works fine in Firefox (latest version - 67.0 (64-bit)) but not in Chrome (latest as well : Version 74.0.3729.169 (Official Build) (64-bit)) But the chrome console doesn't seem to be registering any issues either, it's just blank.

Aim : to make the H3 header a clickable button that hides/shows the two other elements in the page (text area and submit button)

index.html file:
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>-o.O jQ Testing O.o-</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="JS/script_click.js"></script>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>
                    <h3 id="clickTitle">&lt Title here &gt</h3>
                </legend>
                <textarea id="jsonInput"></textarea> </br>
                <input id="submitButton" type="button" name="submitBtn" value="Submit - Launch Test JSON Object"> </br>
            </fieldset>
        </form>
    </body>
</html>



script_click.js file :
$(function() {
      $('#clickTitle').click(function(){
        if ($('#jsonInput').css('display')=='inline') { $('#jsonInput').fadeOut(); } 
        else { $('#jsonInput').fadeIn(); }

        if ($('#submitButton').css('display')=='inline') { $('#submitButton').fadeOut(); } 
        else { $('#submitButton').fadeIn(); }
    });
})




The fieldset element is optional, but I would like to keep it if possible, just because it offers easy by-default formatting in a non-css-reset context :)/>

please be as critical as possible, I'm only getting back in web dev'ing after 5+ absence so I'm having to start from scratch and assuming that whatever I remember is most probably old/deprecated and non-optimal. If there's anything that can be improved upon, please do let me know :)

Thank you in advance for all and any help/advice!
Best regards,
me ^^

Is This A Good Question/Topic? 0
  • +

Replies To: jQ .click() not working in chrome

#2 ianquiksilver   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-May 19

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 06:29 AM

I've added a live version here :

http://mas-fuego.com...vent/index.html



(and is it not possible to edit one's post?)
Was This Post Helpful? 0
  • +
  • -

#3 Catacombs   User is offline

  • New D.I.C Head

Reputation: 9
  • View blog
  • Posts: 44
  • Joined: 24-May 19

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 08:24 AM

Can you had add console messages to the click functions and see if they are firing in Chrome? jQuery click events work on all browsers. There's just something wrong with your code.
Was This Post Helpful? 0
  • +
  • -

#4 ianquiksilver   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-May 19

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 08:59 AM

Hello catacombs,
thanks for your reply, but please do read my initial post in full. The answer to your query is already there.

And yes, I'm guessing something is wrong with my code, I wouldn't come here to post functional code xD
So as recap, this work perfectly in Firefox, both on localhost and the online version, but not on chrome (either local or online, same thing, no reaction)

Posted Image

i can't see the screenshot i uploaded.
its at this URL : http://mas-fuego.com...ds/Capture1.JPG
Was This Post Helpful? 0
  • +
  • -

#5 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 15109
  • View blog
  • Posts: 60,436
  • Joined: 12-June 08

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 09:14 AM

I would suggest putting 'alert' messages or console write out text to see WHERE in your JS function this is breaking down. Maybe the click is being fired but the fadein/out don't work.. or an IF statement isn't getting recognized.
Was This Post Helpful? 0
  • +
  • -

#6 ianquiksilver   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-May 19

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 09:37 AM

updated the code on the online version so anyone can check. there's a console.log statement on each line. And I'm getting different behavior's whether its run through Firefox or Chrome.

In Firefox all console.logs fire out correctly, chrome though seems to have issues with the
.css('display')=='inline')
because only the 'else' events seem to occur.

Please see the screenshot at the following URL :
http://mas-fuego.com...ds/Capture2.JPG

Firefox console on the LEFT hand side and Chrome console on the RIGHT hand side
Was This Post Helpful? 0
  • +
  • -

#7 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2874
  • View blog
  • Posts: 11,242
  • Joined: 03-December 12

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 09:50 AM

Move these lines to be above the closing body tag.
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="JS/script_click.js"></script>

Was This Post Helpful? 0
  • +
  • -

#8 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2874
  • View blog
  • Posts: 11,242
  • Joined: 03-December 12

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 09:59 AM

And this would explain why you are always going to the else.

Attached Image
Was This Post Helpful? 1
  • +
  • -

#9 ianquiksilver   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-May 19

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 10:04 AM

View Postastonecipher, on 30 May 2019 - 09:50 AM, said:

Move these lines to be above the closing body tag.
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src="JS/script_click.js"></script>



Hi! and nop, didn't do anything. Getting all the same console.outputs and no visible reaction on clicking (yes, I made sure to clear the cache a couple times using ctrl+f5. I also reloaded the pages a couple of times after having gone into Chrome -> Dev Tools -> Network tab -> Disable cache)
Was This Post Helpful? 0
  • +
  • -

#10 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2874
  • View blog
  • Posts: 11,242
  • Joined: 03-December 12

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 10:10 AM

I'm using chrome, and I have it working as I would expect based on what you have.

https://jsfiddle.net/brm58nyv/
Was This Post Helpful? 0
  • +
  • -

#11 ianquiksilver   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-May 19

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 10:33 AM

ok there we go. I don't remember how I got to using just 'inline' as criteria because obviously if I had even bothered checking for each element, had that pop out in the console instead, would have saved me quite a few reloads.
this was a minimized version of code from the original site I'm working on, which I have now managed to solve as well, things be animating in Chrome now :)

thanks so much for helping out! but I would like to ask if this post can be deleted as it was not even a valid question or problem/issue. I still don't get why it worked in Firefox though.
Was This Post Helpful? 0
  • +
  • -

#12 astonecipher   User is offline

  • Senior Systems Engineer
  • member icon

Reputation: 2874
  • View blog
  • Posts: 11,242
  • Joined: 03-December 12

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 10:36 AM

View Postianquiksilver, on 30 May 2019 - 12:33 PM, said:

but I would like to ask if this post can be deleted as it was not even a valid question or problem/issue.


We don't delete posts. Someone may stubble on this having a similar issue.
Was This Post Helpful? 0
  • +
  • -

#13 ianquiksilver   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 30-May 19

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 10:39 AM

fair enough, but its still real dumb, as a post i mean. because the issue was at the business end of the keyboard, and there be plenty of those kind of posts already xD
Was This Post Helpful? 0
  • +
  • -

#14 Catacombs   User is offline

  • New D.I.C Head

Reputation: 9
  • View blog
  • Posts: 44
  • Joined: 24-May 19

Re: jQ .click() not working in chrome

Posted 30 May 2019 - 05:23 PM

ianquiksilver, I read your post and thought my suggestion was valid. modi123_1's response below was what I was insinuating. Sadly, my post wasn't as clear lol.

View Postmodi123_1, on 30 May 2019 - 09:14 AM, said:

I would suggest putting 'alert' messages or console write out text to see WHERE in your JS function this is breaking down. Maybe the click is being fired but the fadein/out don't work.. or an IF statement isn't getting recognized.

This post has been edited by Catacombs: 30 May 2019 - 05:24 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1