safari jquery click not working

jQuery .click() does not work in Safari

I have seen several similar posts with solutions that seemed to have worked for those people, but I CANNOT get this to work.

I am using http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/ in my project. It works PERFECTLY, in all browsers, except in Safari the BROWSE button does not open a file dialog. The following code exists in script.js (which is included for the plugin to work):

The .click() does not fire in Safari. I have tried the solution as per jQuery .click() works on every browser but Safari and implemented

But then I get the error that dispatchEvent is not a function . I then did some research on this, and tried the jQuery.noConflict() route, but this did not resolve the error. Also, I use a LOT of jQuery in my main file and I cannot have the noConflict() mode activated for the entire page. There is also no reason that the jQuery should be conflicting with anything as I am only using jQuery and normal javascript and I am not using anything like prototype or angular. Does anybody know of another way to simulate a click in Safari?

UPDATE: Just FYI, I have added an alert('test') in the mentioned function (which triggers when BROWSE is clicked), and I do get the alert in Safari, but it is not simulating the click of the file input element, i.e: it is not openening the file dialog.

 Answers

The second section of code in my original question turned out to work, except for 2 things.

1) The method does not like jQuery, so instead of

var a = $(this).parent().find('input')[0];

I assigned an ID to my file input and instead called

var a = document.getElementById('upload_select');

2) Safari blatantly ignores this if the input is hidden ( display:none; ), which is was, so instead I made the input font-size = 1px; and opacity = 0.

Implementing these two changes got the code working.

Dynamic jQuery Click Events Not Working In Mobile Safari

November 11, 2017 by Andreas Wik

I just ran into a really weird problem, appearing only in the Mobile Safari browser. I was testing a website on my iPad, and my jQuery click events did not work.

What I was doing was dynamically adding elements to the page. Then I also had a click event handler bound to the class of these added elements. Like this:

This works absolutely fine in all browsers except for Mobile Safari. It works if the element is an anchor or a button, but if you add, for example, a <h1> or a <p> , it breaks.

It turns out that the element must have the anchor attribute set to pointer in order for this to work.

So, adding this little piece to my CSS class solves it:

Voila! Problem solved. Whether this is a bug or a conscious decision by Apple, I don’t know.

I put together an  example  or the so you can test it if you have a device with Mobile Safari nearby…

See the Pen Dynamic click events not working in Mobile Safari without cursor set to pointer by Andreas Wik ( @andreaswik ) on CodePen .

Share this article

Latest YouTube Videos

Recommended articles

HatchJS.com

Cracking the Shell of Mystery

jQuery on Click Not Working: How to Fix It

jQuery on Click Not Working? Here’s How to Fix It

Have you ever tried to use the jQuery `click` event handler, only to find that it’s not working? You’re not alone. This is a common problem, and there are a few different reasons why it might be happening.

In this article, we’ll take a look at some of the most common causes of jQuery `click` not working, and we’ll show you how to fix them. We’ll also provide some tips for troubleshooting jQuery events in general.

So if you’re having trouble getting the `click` event to work, read on!

What is the jQuery `click` event?

The jQuery `click` event is fired when a user clicks on an element. It’s a very versatile event, and it can be used to trigger a variety of different actions, such as opening a new window, playing a sound, or submitting a form.

Why isn’t jQuery `click` working?

There are a few different reasons why the jQuery `click` event might not be working. Here are some of the most common:

• The element doesn’t have the `.click()` handler attached. This is the most common reason why the `click` event isn’t working. To fix this, simply add the `.click()` handler to the element that you want to listen for clicks.
• The `.click()` handler is not defined correctly. The `.click()` handler must be a function. If it’s not a function, the `click` event won’t be fired.
• The `.click()` handler is not being called. Even if the `.click()` handler is defined correctly, it won’t be fired unless it’s called. To call the `.click()` handler, you can use the `.on()` method.
• The `.click()` handler is being called too early. The `click` event is fired after the element has been clicked. If you call the `.click()` handler before the element has been clicked, it won’t do anything.
• The `.click()` handler is being called too late. The `click` event is fired after the element has been clicked. If you call the `.click()` handler after the element has been clicked, it will be fired twice.

How to fix jQuery `click` not working

To fix jQuery `click` not working, you need to identify the cause of the problem and fix it. Here are some tips for troubleshooting jQuery events:

• Check the element’s `.click()` handler. Make sure that the element has the `.click()` handler attached and that it’s defined correctly.
• Check the `.click()` handler’s function. Make sure that the `.click()` handler is a function and that it’s being called correctly.
• Check the `.click()` handler’s timing. Make sure that the `.click()` handler is being called after the element has been clicked and not before or after.

If you’re still having trouble getting the `click` event to work, you can try using a different event handler, such as `mousedown` or `mouseup`.

jQuery is a popular JavaScript library that makes it easy to select, manipulate, and animate elements on a web page. One of the most common jQuery events is the `click` event, which occurs when a user clicks on an element.

The `click` event can be used to trigger a variety of actions, such as opening a new window, playing a sound, or submitting a form. However, there are a number of reasons why jQuery click may not be working.

In this guide, we will discuss the most common reasons why jQuery click is not working and how to troubleshoot the issue.

What is the jQuery click event?

The jQuery click event is a type of event that occurs when a user clicks on an element. It is triggered by the `click()` method.

The `click()` method takes a single argument, which is the element that you want to listen for clicks on. For example, the following code would listen for clicks on the `button` element with the id `my-button`:

$(‘buttonmy-button’).click(function() { // Do something when the button is clicked });

When a user clicks on the `button`, the `click()` method will be called and the code inside the callback function will be executed.

Why is jQuery click not working?

There are a number of reasons why jQuery click may not be working. Some of the most common reasons include:

The element you are trying to click is not visible.

The element you are trying to click does not have the `click` event handler attached to it.

The `click()` method is not being called correctly.

Let’s take a closer look at each of these reasons.

If the element you are trying to click is not visible, then the `click()` event will not be triggered. This is because the `click()` event only fires when a user clicks on an element that is visible on the screen.

To check if an element is visible, you can use the `is()` method. The `is()` method takes a CSS selector as an argument and returns a boolean value indicating whether or not the element matches the selector.

For example, the following code would check if the element with the id `my-element` is visible:

if ($(‘my-element’).is(‘:visible’)) { // The element is visible } else { // The element is not visible }

In order for the `click()` event to work, the element you are trying to click must have the `click` event handler attached to it. The `click` event handler is a function that is called when the `click` event is triggered.

To attach a `click` event handler to an element, you can use the `on()` method. The `on()` method takes two arguments, the first argument is the event type and the second argument is the event handler function.

For example, the following code would attach a `click` event handler to the element with the id `my-element`:

$(‘my-element’).on(‘click’, function() { // Do something when the element is clicked });

The `click()` method is a function that is called when the `click` event is triggered. However, there are a number of ways to call the `click()` method incorrectly.

One common mistake is to call the `click()` method on an element that does not have the `click` event handler attached to it. This will cause the `click()` event to be ignored.

Another common mistake is to call the `click()` method on an element that is not visible. This will also cause the `click()` event to be ignored.

Finally, it is important to make sure that the `click()` method is being called in the correct scope. If the `click()` method is called outside of the scope of the element that has the `click` event handler attached to it, then the `click()` event will not be triggered.

Troubleshooting jQuery click not working

If jQuery click is not working, there are a few things you can check to troubleshoot the issue.

First, make sure that the element you are trying to click is visible. You can do this by using the `is()` method.

Second, make sure that the element you are trying to click has the `click` event handler attached to it. You can do this by using the `on()`

3. How to fix jQuery click not working

jQuery is a popular JavaScript library that makes it easy to add event handlers to elements on a web page. However, there are a few common reasons why the jQuery `click` event might not be working.

• The element you are trying to click is not visible. If the element is not visible, the browser will not fire the `click` event. Make sure the element is visible in the browser’s viewport before trying to click it.
• The element you are trying to click does not have the `click` event handler attached to it. To attach the `click` event handler to an element, you can use the following syntax:

$(element).on(‘click’, function() { // Do something when the element is clicked });

• The `click()` method is not being called correctly. The `click()` method is called when the user clicks on an element. To call the `click()` method, you can use the following syntax:

$(element).click();

If you are still having trouble getting the jQuery `click` event to work, you can try the following troubleshooting steps:

• Check the console for errors. The console is a debugging tool that can help you identify errors in your code. If there are any errors in your code, they will be displayed in the console.
• Use the `console.log()` method to debug your code. The `console.log()` method allows you to print messages to the console. You can use this method to debug your code by printing out the values of variables and objects.
• Use a debugger to debug your code. A debugger is a tool that allows you to step through your code line by line. This can help you identify problems in your code that are difficult to find using the console or the `console.log()` method.

If you have tried all of the troubleshooting steps above and you are still having trouble getting the jQuery `click` event to work, you can contact a JavaScript developer for help.

4. Additional resources

For more information on the jQuery click event, please refer to the following resources:

• [jQuery Documentation: click](https://api.jquery.com/click/)
• [W3Schools: jQuery click event](https://www.w3schools.com/jquery/event_click.asp)
• [Stack Overflow: jQuery click not working](https://stackoverflow.com/questions/1448633/jquery-click-not-working)

The jQuery `click` event is a powerful tool that can be used to add event handlers to elements on a web page. However, there are a few common reasons why the jQuery `click` event might not be working. By following the troubleshooting steps in this article, you can quickly and easily fix any problems you are having with the jQuery `click` event.

Q: Why is my jQuery click event not working?

• A: There are a few possible reasons why your jQuery click event might not be working.
• You may have misspelled the selector. Make sure that you have spelled the selector correctly, including any case sensitivity.
• You may have used the wrong type of selector. jQuery supports a variety of selector types, such as element selectors, class selectors, and ID selectors. Make sure that you are using the correct type of selector for the element you want to target.
• You may have forgotten to add the `.click()` method to the selector. The `.click()` method is what tells jQuery to listen for click events on the selected element. Make sure that you have added the `.click()` method to the selector, and that you are calling the method correctly.
• You may have disabled the default behavior for the click event. By default, when a user clicks on an element, the element will be clicked. However, you can disable the default behavior for the click event by using the `preventDefault()` method. If you have disabled the default behavior for the click event, then your jQuery click event will not work.

Q: How can I troubleshoot a jQuery click event that is not working?

• A: There are a few things you can do to troubleshoot a jQuery click event that is not working.
• First, try to narrow down the problem. Can you reproduce the problem on a different page or in a different browser? If you can, then you know that the problem is not with your code. If you cannot reproduce the problem, then the problem is likely with your code.
• Once you have narrowed down the problem, you can start to troubleshoot the code. Make sure that you are using the correct selectors, that you are calling the `.click()` method correctly, and that you are not disabling the default behavior for the click event.
• If you are still having trouble, you can try using a debugging tool like the Chrome Developer Tools or the Firebug extension. These tools can help you to visualize the DOM and the event flow, which can help you to identify the problem.

Q: What are some common mistakes that people make when using jQuery click events?

• A: There are a few common mistakes that people make when using jQuery click events.
• Misspelling the selector. This is one of the most common mistakes, and it can be easy to do if you are not careful. Make sure that you spell the selector correctly, including any case sensitivity.
• Using the wrong type of selector. jQuery supports a variety of selector types, such as element selectors, class selectors, and ID selectors. Make sure that you are using the correct type of selector for the element you want to target.
• Forgetting to add the `.click()` method to the selector. The `.click()` method is what tells jQuery to listen for click events on the selected element. Make sure that you have added the `.click()` method to the selector, and that you are calling the method correctly.
• Disabling the default behavior for the click event. By default, when a user clicks on an element, the element will be clicked. However, you can disable the default behavior for the click event by using the `preventDefault()` method. If you have disabled the default behavior for the click event, then your jQuery click event will not work.

Q: How can I prevent a jQuery click event from bubbling up the DOM?

• A: You can prevent a jQuery click event from bubbling up the DOM by using the `stopPropagation()` method. The `stopPropagation()` method tells jQuery to stop the event from bubbling up the DOM. To use the `stopPropagation()` method, simply call it on the event object, like this:

$(element).click(function(event) { event.stopPropagation(); });

Q: How can I use jQuery click events to trigger an AJAX request?

• A: You can use jQuery click events to trigger an AJAX request by using the `.ajax()` method. The `.ajax()` method allows you to send an AJAX request to a server and receive a response. To use the `.ajax()` method, simply call it on the element that you want to trigger the AJAX request, like this:

$(element).click(function(event) { $.ajax({ url: “/some/url”, type: “GET”,

In this comprehensive , we have discussed the most common reasons why jQuery on click is not working. We have also provided detailed solutions to each of these problems. We hope that this has been helpful and that you are now able to resolve any issues you are having with jQuery on click.

Here are the key takeaways from this :

• Make sure that the jQuery library is loaded correctly. This is the most common cause of jQuery on click not working.
• Check the syntax of your jQuery code. Make sure that you are using the correct syntax for the jQuery on click event.
• Make sure that the element you are targeting with the jQuery on click event exists. If the element does not exist, the jQuery on click event will not work.
• Check the JavaScript console for errors. If there are any errors in your JavaScript code, the jQuery on click event will not work.
• Try using a different jQuery event. If jQuery on click is not working, try using a different jQuery event, such as jQuery on mouse click.

We hope that this has been helpful and that you are now able to resolve any issues you are having with jQuery on click.

Author Profile

Latest entries

• December 26, 2023 Error Fixing User: Anonymous is not authorized to perform: execute-api:invoke on resource: How to fix this error
• December 26, 2023 How To Guides Valid Intents Must Be Provided for the Client: Why It’s Important and How to Do It
• December 26, 2023 Error Fixing How to Fix the The Root Filesystem Requires a Manual fsck Error
• December 26, 2023 Troubleshooting How to Fix the `sed unterminated s` Command

Similar Posts

Metallb pending external ip: what it is and how to fix it.

MetalLB Pending External IP: What It Is and Why It Matters MetalLB is a load balancer that can be used with Kubernetes clusters to distribute traffic across multiple pods. When a pod is created, MetalLB assigns it a pending external IP address. This address is not yet routable, but it will be once the pod…

Stable Diffusion Python Not Found: How to Fix

Stable Diffusion Python Was Not Found Have you ever tried to install a Python package and received the error message “stable diffusion python was not found”? If so, you’re not alone. This error message is a common one, and it can be frustrating to figure out how to fix it. In this article, we’ll take…

How to Fix Cannot Access org.springframework.context.ConfigurableApplicationContext

Cannot Access org.springframework.context.ConfigurableApplicationContext In the Spring Framework, the `ConfigurableApplicationContext` is a central class that provides access to the application’s beans and other configuration information. However, there are a few common errors that can occur when trying to access the `ConfigurableApplicationContext`. In this article, we will discuss the most common causes of these errors and how…

Unity ArgumentOutOfRangeException: Value cannot be null

Unity ArgumentNullException: What It Is and How to Fix It Have you ever been working on a Unity project and been hit with the dreaded ArgumentNullException? This error can be a real pain, as it can be difficult to figure out what’s causing it and how to fix it. In this article, we’ll take a…

Vite React Blank Page: How to Fix It and Why It Happens

Vite React Blank Page: A Guide to Fixing It Vite is a fast and lightweight build tool for React applications. It’s known for its blazing-fast speed, but it can sometimes cause problems with blank pages. In this guide, we’ll walk you through how to fix a blank page in a Vite React application. We’ll start…

Authentication plugin caching_sha2_password is not supported: How to fix it

Authentication Plugin Caching SHA2 Password is Not Supported If you’re trying to use the caching_sha2_password authentication plugin on your MySQL server, you may have come across the error message “caching_sha2_password authentication plugin is not supported”. This error message can occur for a number of reasons, but it’s usually because the plugin is not installed or…

Bug Tracker

Side navigation, #10412 closed bug (invalid).

Opened October 03, 2011 09:06PM UTC

Closed October 04, 2011 01:59AM UTC

Chrome/Safari issues with click()

Description.

Chrome and Safari seem to have a problem with the click() function in that it ignores it if a click() is within another click(). See code:

I'm attempting to load an slideshow (Lightbox 2) with a text link instead of the images themselves.

To fix this I've had to use the javascript fix found here: http://stackoverflow.com/questions/6157929/how-to-simulate-mouse-click-using-javascript/6158050#6158050 to get this to work.

I'm using Chrome 14.0.835.186 and Safari 5.1(7534.48.3)

Changed October 04, 2011 01:59AM UTC by timmywil comment:1

click() is a jQuery method (not a DOM method) that can be used to programmatically click an element. See the code below:

• Development
• jQuery/JavaScript

Fix: jQuery .click() Event Not Working with Dynamically Added Elements

• Programming

jQuery .click is one of the most simple and widely used events in the jQuery library. It works great for most of the time, but you may encounter a problem when you add dynamic elements.

jQuery .click() Event Not Working with Dynamically Added Elements

jQuery .click is one of the most simple and widely used events in the jQuery library. It works great for most of the time, but you may encounter a problem when you add dynamic elements. Let’s set up an example. Drop the following code into a text file called test.html and then open it in a browser.

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery Test</title> </head> <body> <p><div id="div1">ready...</div></p> <p><button id="btn1">Button 1</button></p> <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btn1').click(function () { $('#div1').html('You clicked button 1'); }); }); </script> </body> </html>

It’s a very simple example and when you press button 1 it displays some text in div1. No problem.

Let’s get more adventurous and instead of just text let’s add a html button dynamically into the div. Then we’ll put a .click function to handle the event. The new script section will be:

<script type="text/javascript"> $(document).ready(function () { $('#btn1').click(function () { $('#div1').html('<button id="btnNew">Add Button</button>'); }); $('#btnNew').click(function () { alert("New Button Clicked"); }); }); </script>

After you have updated the code, save it and refresh the browser. This time when you click button 1 a new button appears. When you click on the new button .. nothing!

The problem is that .click() only works for elements that already existed when the page loaded. ‘btnNew’ doesn’t exist in this context and so you cannot directly bind it. This is easy to fix: you need to delegate the event. Change the .click code to:

$('body').on('click', '#btnNew', function () { alert("New Button Clicked"); });

The .on() event is related to the .click() event but by not directly binding the event and moving to delegates we can tell jQuery how to handle a click event raised from an element known as btnNew wherever it is on the body.

Prior to jQuery 1.7 you may have used .bind(), .delegate() or .live(), but these have all been superseded and the functionality rolled into the .on() event. You can find more details on the jQuery site: http://api.jquery.com/on/#direct-and-delegated-events

The final code is:

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>jQuery Test</title> </head> <body> <p><div id="div1">ready...</div></p> <p><button id="btn1">Button 1</button></p> <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btn1').click(function () { $('#div1').html('<button id="btnNew">Add Button</button>'); }); $('body').on('click', '#btnNew', function () { alert("New Button Clicked"); }); }); </script> </body> </html>

[misi ad=”Adsense”]

Related posts:

• Why jQuery only works once in some ASP.NET pages
• bootstrap-dialog is a useful little plugin
• Chain of Responsibility JavaScript Design Pattern
• Google Maps: Adding Multiple Markers each with their own InfoWindow

3 thoughts on “ Fix: jQuery .click() Event Not Working with Dynamically Added Elements ”

Thanks for posting this. This has been of great help. Was stuck with related issue for some time. Also I just wanted to ask, for using the “on” function for “click” event and “#btnNew” button, you have used “body” element. Is there any specific reason for this?

Thank you very very much! I ran into this problem and was afraid that I could not find a decent article explaining the issue.

Thanks very much for posting this – solved a pesk problem for me with handling events for dynamically added list items,

Comments are closed.

You may have missed

• Science/Astronomy

Metals used in Modern British Coins

• Flutter/Dart

How to shuffle a deck of cards for card games in Flutter/Dart

• C# Code Snippets

Left, Right and Mid Functions in C#

Redirect url to https (c#), format currency in c#.

jQuery button click fails to work

Tell us what’s happening: I am working on my project and trying to use jQuery to make a simple alert box when the button is clicked.

However, this doesn’t work and I don’t get what I am doing wrong.

I imported jquery in code pen using google online source and used the codepen editor import function itself. Did not help. The only thing i can think of is the double name but if i change this the button: button element gets conflicted and stops to work.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36 .

@KittyKora selectors here need to be closed with quote mark . Moreover button1 will not work here; if it’s a class or id make sure to use proper use of class and id selectors with jQuery- hope this will help you

this wont work … <script > src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> try this …

What do you mean with: make sure to use proper use of class and id selectors with jQuery? can u give an example because if i add an id

it still fails to work

@KittyKora ,

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Safari won't open new links in new tab

Currently trying to open new tabs from carfax.com site. When I click on a car listing , it usually opens up in new tab. Well all of a sudden it just opens a blank new tab. Have restarted computer, cleared history, cache. Don't know what else to do.

Mac mini 2018 or later

Posted on Oct 3, 2021 7:57 PM

Posted on Oct 4, 2021 2:23 PM

@stilltrell, I am having this issue too in Safari 15. This only seems to be happening in Tab Groups, not in the main tab area.

Here's what I see happening ... if you go to Safari > Preferences > 'New tabs open with' there are 4 options:

I am finding that in Safari 15 Tab Groups (new feature), ALL new tabs open with whatever you have set above.

When you click the carfax link (or any link that opens in a new tab), watch the address bar. It looks like it opens the link and then quickly redirects to your new tab setting above. From what I can tell it's a bug and I do not have a solution.

The work around is to right click on the link, 'Copy Link', and paste it into the new tab to open.

Here is the Reddit Thread on the issue: https://www.reddit.com/r/Safari/comments/ps4l7z/open_link_in_new_tab_taking_me_to_my_start_page

Similar questions

• Safari doesn't open links -> opens "start page" Often, not always, when I try to follow a link to new Tab the tab shows the name of the page it is opening, but changes to Starting page before opening. This is new and started after Monterey update. This is super annoying and messes up my work. What is going on? Any ideas? Thanks, 788 3
• All links open into empty windows on Safari. Hi, I've had this issue for a while and its getting really annoying. Whenever I click on any link, it does open into a new tab (I can see the URL) however when I click on the new tab it shows me a blank start page instantly. I've tried changing my system prefs but nothing helps :( 396 1
• New window does not open 'New window' on Safari does not allow searches. It just comes up with a same web page all the time. It all started when I did the latest update to Mac Monterey 641 4

Loading page content

Page content loaded

Oct 4, 2021 2:23 PM in response to stilltrell

Oct 23, 2021 9:54 PM in response to stilltrell

So I figured out how to fix one of the bugs!

When I would use the Tab Groups, very randomly when I clicked a link it would go to my Start Page. I had my setting under General/New tabs open with: Same Page. I changed it to:  Empty Page , and now the link opens in a new tab just fine.

Hopefully this works for you guys, it was driving me insane.

Jan 6, 2022 8:52 AM in response to stilltrell

I am having problems with links consistently opening an empty page or briefly opening and closing the target page.

I did discover a couple of additional work-arounds.

• Control-click or right-click and choose Open Link in New Window. If you want it in a tab in the current group you can Control-click/right-click the location field and use Move to Tab Group before closing the extra window.
• Deleting and re-creating the tab groups also fixed it for me. After doing that links are opening it tabs fine.

Note that I have it set to "Open new tabs with: Start Page" and "Open pages in tabs instead of windows: Always".

I hope it works for other people. It got me past a very irritating problem.

Oct 4, 2021 5:31 PM in response to coolbluefrog

@coolbluefrog

I don't see the options you are suggesting but this issue ONLY occurs with the carfax site. I have no issues with any other sites. I even tried the same carfax site using safari on my iPad and I have no problems.

It is definitely something going on with Safari on Mac.

Perhaps this is one of the minor bugs with Safari 15.

Thanks for the suggestion(s) and any future troubleshooting.

Oct 15, 2021 2:35 PM in response to coolbluefrog

I'm just glad I'm not the only one having this issue. thought I was losing my mind.

thanks for the suggestion, coolbluefrog. I also found right clicking and selecting open in new tab group works. And, even more baffling, successive links opened in that new tab group open fine. C'mon Apple, test your software.

Oct 24, 2021 4:53 AM in response to Milomavi

Thanks. I don't know what happened but over the past few weeks, I have not had any issues. Not sure if Apple had an update or fixed the issue but all is good now.

I did go to my options and change them just in case but all is good.

Appreciate the help again!

Nov 18, 2021 2:08 AM in response to stilltrell

Safari 15 on the Mac M! is a real disaster, and there re no signs of it getting fixed anytime soon. It's really depressing. Links opening empty tabs, bookmarks causing the browser to crash immediately... Tabs that make it impossible to figure out which one is active.... how did this browser ever get released past alpha?

Jan 5, 2022 2:50 PM in response to macguyincali

Same here, if I have a tab group selected and click to open a link from e.g. Reminders it will open in a new window completely, regardless of my settings.

If I move away from the tab group to the "default".. "group" then opening links will happen in the same window in a new tab.

Tab groups are pretty neat though!

Jan 6, 2022 10:29 AM in response to MajorZippy

Safari 15 works well on iOS but it doesn’t look like they will ever fix the one on the Mac. They had months to do it and it’s crashing with problems all the time on the new M1. My solution eventually was to switch to brave and chrome . I can’t keep using safari when I can’t even add bookmarks without crashing it

Oct 27, 2021 11:20 AM in response to stilltrell

I was still having the issue with latest Safari so thanks for asking the question so that I could find @Milomami's great answer!

Nov 3, 2021 8:28 AM in response to stilltrell

That did it for me too. Thank You, Thank You, Thank You. I agree that Apple has to get with it a stop screwing up updates and new versions.

Dec 3, 2021 2:22 AM in response to Milomavi

Dec 3, 2021 9:47 AM in response to coolbluefrog

This is a bug that happens only in Tab Groups for me. Hopefully they fix it. Very frustrating, though I'm starting to really really on the Tab Groups functionality. It is very helpful.

Dec 12, 2021 12:02 PM in response to coolbluefrog

Right-click and select "Open Link in New Tab," or whatever, also seems to work as expected when this bug is bugging me.

Dec 15, 2021 7:56 AM in response to Milomavi

Thank you! Having to right click -> open in new tab was an annoying workaround, but this worked.

Fixing Focus for Safari

In 2008, Apple’s Safari team had a problem: web developers had noticed that links, buttons, and several input elements were not matching the :focus selector when clicked. Similarly, clicking on those elements did not fire a focus or focusin event. The developers dutifully submitted bugs against Webkit and were waiting for help.

That help never came.

The reason is that macOS didn’t transfer focus to operating system and application buttons when they were clicked and the stakeholders decided to be consistent with the operating system instead of with their competitors’ browsers. The discussions have lasted 13 years and are still ongoing, but the team at Apple is adamant: buttons, links, and non-text inputs won’t get focus.

Helpfully, the team agreed that a workaround would be to implement :focus-visible , the CSS selector that matches elements that are awaiting input; they are focused but not activated. Clicking a button or link both focuses and activates it, but tabbing into them will match this focus-only selector. This partial solution would indeed help, but it stalled in April of 2021, three years after it was started and 11 years after it was suggested.

This failure has started to snowball. Safari introduced :focus-within in early 2017, beating most of their competitors to market with this newly standardized pseudo selector. But it wouldn’t match any container when a button, link, or non-text input was clicked. In fact, if the user were focused on a text input (matching :focus-within selector for its container) and then clicked on one of those troublesome elements, the focus left the container entirely.

Edit (8/29/2022) Safari has implemented :focus-visible in version 15.4. The bugs described in this article for :focus still exist, though. Clicking any problematic element does not fire focus events, and does not match the :focus or :focus-within selectors.

It’s clear that Apple’s Webkit/Safari team are not going to fix this issue. There is an excellent polyfill available for :focus-visible from the WICG. There is a good polyfill available for :focus-within as well. But I have not found a polyfill for :focus , so I wrote one:

Edit (1/22/2024) I created a test suite and support matrix for all the different ways that an element can be made click focusable or rendered unfocusable (there are 108 test cases so far!). Safari is by far the least supported but even Firefox and Chrome/Edge had failing tests. Notably, no browser properly handles click focusability on the generated control elements for <audio> and <video> elements. Building out this test suite also showed that the previous polyfill I made was insufficient for all of the use-cases. I wrote a new, more comprehensive polyfill here .

Polyfill Breakdown

The heart of this polyfill is the Element.focus() method call (on line #112 in the gist above) that dispatches the focus and focusin events. Once the browser sees these events associated with an element, this element matches the :focus selector.

There are a few events we could listen to in order to dispatch that focus event when the element is clicked: mousedown , mouseup , and click .

A note on events If you’re not familiar with how events work in the browser, there are two phases. The capturing phase starts at the topmost element, <html> , and proceeds down through the DOM towards the element that was clicked. The bubbling phase begins after the capture phase ends, and it starts at the lowermost element that was clicked and proceeds upwards (bubbles) toward the HTML element. Any node in this pathway can attach an event listener that is triggered when the event hits that node.

Any of these event listeners can stop the event from continuing and attach listeners for following events that could prevent them from firing. This is important. We don’t want some other event listener to prevent our listener from firing. That means we want to attach to the earliest event, mousedown , and during the capturing phase. This is done on line #81 in the gist above.

However, Element.focus() fires synchronously, meaning that the focus and focusin events would fire before the blur and focusout events. The correct order of events is:

• mousedown [targeting the clicked element]
• blur [targeting the previously active element]
• focusout [targeting the previously active element]
• focus [targeting the clicked element]
• focusin [targeting the clicked element]
• mouseup [targeting the clicked element]
• click [targeting the clicked element]

We can use a zero second setTimeout call (line #56 in the gist above) to enqueue the Element.focus() call after all of the currently queued events. This moves our forced focus event after the blur and focusout events, but this also moves it after the mouseup and click events, which is not ideal.

To ensure that the mouseup and click events fire after our forced focus event, we need to capture and resend them. We don’t want to capture every mouseup and click event, so we need to add the listeners only when we are going to force a focus event (line #41–42) and remove them when we’re done (line #58–59). Lastly, we need to re-dispatch those events with all the same data as they originally had, such as mouse position (line #67).

Lastly, we need to only do all of this work in Safari (see line #80) and only when the unsupported elements are clicked. The wonderful folks at allyjs.io have provided a very useful test document for checking what elements get focus. After comparing the results of clicking each of these elements in different browsers, I found the following elements needed this polyfill:

• anchor links with href attribute
• non-disabled buttons
• non-disabled textarea
• non-disabled inputs of type button , reset , checkbox , radio , and submit
• non-interactive elements (button, a, input, textarea, select) that have a tabindex with a numeric value
• audio elements
• video elements with controls attribute

The function isPolyfilledFocusEvent (line #22–36) checks for these cases.

I hope this helps.

And I hope Safari supports this stuff natively sometime.

EDIT (15/1/2022): Real-world production use of the polyfill has revealed two bugs. First, the redispatched events should be dispatched from the event targets rather than from the document. Events not fired from the previous target are stripped of their target property and do not trigger default behaviors like navigating on link clicks.

Second, the capturing of possible out-of-order mouseup and click events needs to be handled differently. By adding the listeners dynamically, they were being added after any listeners that were added after the polyfill runs. This means that the other listeners would trigger first before the event being captured, and then they would trigger again when the event was redispatched. The solution is to add the polyfill’s listeners for mouseup and click immediately, and toggle a capturing flag on and off instead of attaching and removing listeners.

EDIT (21/1/2022): More production use has revealed another bug. Clicking on an already focused element should not fire another focus (or focusin) event. However, the polyfill was blindly firing a focus event on every click, or mousedown, of an affected element. To prevent this from happening, we check if the event target element is the same as the document’s active element before proceeding with the polyfilled focus behavior.

A side effect of not firing focus on every click is that Safari returns focus to the body element if it decides that the target element isn’t focusable. To stop this, we call preventDefault() on the mousedown handler. (How did I know that would work? I didn’t. It took some trial and error to find out when and how Safari was moving focus to the body.)

EDIT (23/1/2022): Clicks on label elements should redirect focus to the labeled element. In order to detect that a click was occurring on a label, we have two choices: (1) on every mousedown event that we are listening to, we could climb the DOM tree all the way to the body element to see if the event triggered on an element in a label, or (2) detect when the pointer is inside a label before the mousedown event. Option 1 would work but it would be very expensive, especially on large pages. For option 2, we had to find how to detect the user was inside a label before the mousedown event fired.

The event mouseenter fires before the mousedown event (even on touch devices!) and it fires for each element that the mousedown event would bubble through. That means that each element has a mouseenter (and mouseleave ) event that it is the target of. (Since we’re using delegated listeners, we cannot rely on currentTarget because that would always be null.)

We added a function to get the redirected focus target when the user is inside a label element, and we use that element to detect if it already has focus and to focus on it if not.

EDIT (17/2/2022): We needed to account for possibly nested children in focusable elements that accept children, such as buttons, anchor tags or arbitrary elements with a tabindex attribute. Since we were traversing the DOM looking for focusable parents anyway, we decided to remove the mouseenter and mouseleave listeners we were using for discovering focusable label elements and fold that use case into the new strategy. We also discovered a bug in our check for the tabindex attribute: the HTMLElement property tabIndex reports a value of -1 if the attribute has not been explicitly set. The solution is to use .getAttribute('tabindex') to determine if the value has been explicitly set.

Written by Nick Gard

Web Developer, Oregonian, husband

More from Nick Gard and ITNEXT

Tuples in JavaScript

No, javascript doesn’t have tuples. but with array destructuring, we can pretend it does in languages where tuples actually exist, their….

Alexis Ducastel

Benchmark results of Kubernetes network plugins (CNI) over 40Gbit/s network [2024]

This article is a new run of my previous benchmark (2020, 2019 and 2018), now running kubernetes 1.26 and ubuntu 22.04 with cni version….

Daily bit(e) of C++ | Optimizing code to run 87x faster

Daily bit(e) of c++ #474, optimizing c++ code to run 87x faster for the one billion row challenge (1brc)..

Boolean Logic in JavaScript

Part 1: boolean operators & truth tables, recommended from medium.

Baha Abisheva

Setting up JS bridge between your webpage and WKWebview in your iOS app

Nowadays a lot of apps prefer to display content using a webview. this creates a need for webviews to try and act like native views. for….

armanabbasi

How to Get and Use Cookies in Playwright: A Step-by-Step Guide for Beginners

General Coding Knowledge

Stories to Help You Grow as a Software Developer

Coding & Development

Tech & Tools

Amir Latypov

Stackademic

Upgrading GraphQL Tests in Cypress with TypeScript

Improve your cypress tests for graphql apis with typed data returns. safeguard against errors using typescript..

Kanushka Gayan

Beyond 100vh: Simplifying Responsive Design with CSS Viewport Units

Adapting to modern screens: harnessing css viewport units for optimized mobile responsiveness and simplified design.

Shah Moksha

Simform Engineering

Globalize Your Vue App: A Practical Guide to Vue 3 Internationalization

A step-by-step guide to creating an international website with vue 3 and vite..

Dark mode UI design. Organizing color variables and naming.

I couldn’t find any practical guide on creating dark and light themes, so i did my own researches and experiments on figma. decided to….

Text to speech

Jquery not working in safari

Just finished a site feganconstruction.co.uk that works fine in all major browsers except Safari. I’ve looked through the log and can find no errors. If anyone has any ideas id be grateful.

Issue 1 - links do not slide parallax style to anchored link Issue 2 - Slider-pro text does not show up Issue 3 - Gallery does not load at all

From what I’m seeing, Safari doesn’t like how a function is being declared from within the if condition. That would be the md_cd1_maxh() function.

Did you get this in an inspector with safari (sorry couldnt find one)

I’m not using .ct-countdown-2 but yet its still causing the whole dom not to load - im stumped… Would you advise me removing the whole function?

Thanks Paul have this sorted.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

• Use the old theme

Home / Fixing WordPress / Jquery not working with Safari browser

Jquery not working with Safari browser

(@darrellwilde)

2 years ago

Got an issue with a html form on my site.

So on a desktop in chrome the form submits fine and gives me a thank you pop alert and redirects to a page however on Safari it just clears the form. Not sure if it’s a conflict with something or there is a better way to program the form.

I’m using raw html for the form and code snippets plug-in to put the JavaScript in the head.

The page I need help with: [ log in to see the link]

(@kaavyaiyer)

Hi @darrellwilde ,

I wasn’t able to submit the form in both Chrome and Safari browsers. When I submit, it just clears my form. However, a couple of errors are being flagged on submit in the Network tab of Safari’s Developer Tools.

I have uploaded a screenshot of the error here .

You might want to check where these fields are coming from and remove/handle them accordingly.

I hope this helps!

There is already a JavaScript error when loading the page:

Uncaught TypeError: $(...).datepicker is not a function

You can see this when you open the JavaScript console: https://wordpress.org/support/article/using-your-browser-to-diagnose-javascript-errors/

If this is part of your scripts, you should correct it. It is because of this line:

$( "#datepicker" ).datepicker();

and the reason is that the library for the datepicker is not loaded.

Then I also notice that the page uses a mixture of http:// and https:// . Some browsers will prevent exactly that, causing them to load only parts of the page. Since you seem to have an SSL certificate, I would recommend switching any output to https:// . In the simplest case, you only need to adjust the page URL in the WordPress settings and save the permalinks once. See: https://wordpress.org/support/article/https-for-wordpress/

Possibly both will then also solve the problems with Safari.

@threadi Ok I found the datepicker script and removed it which has resolved the errors in javascript but the form still doesnt work in Safari only Chrome for some reason.

@kaavyaiyer Are you still getting these errors now i have removed the datepicker issue?

I have no idea where it is getting those extra fields from as they are not embedded on my page.

Unfortunately it still isnt working on Safari for me only chrome on desktop.

I have made a html page just with the javascript and form on and it works. See: https://www.activetalentagency.com/form_test.htm

It just seems to be something in WordPress which is preventing it on Safari and possibly other browsers.

I also see the errors mentioned by @kaavyaiyer and can understand the error he describes. The fields are also in the source code within your form and are added by a JavaScript that is in the HTML code of the page. Here is an excerpt of it:

if ($(form).attr("method") != "get") { $(form).append('<input type="hidden" name="aEyFekStThd" value="BmMx5_J@70z8u" />'); }

Your template does not contain these fields, nor does wordpress itself create them, which is why I suspect that some plugin in your system adds them. Possibly it is an anti-spam protection plugin.

My recommendation would therefore be to deactivate all plugins and see if this changes the situation. If not, you should also change the theme as a test.

@threadi @kaavyaiyer Well guys that was strange…. I disabled all plugins, activated them one by one and the mysterious extra fields disappeared.

I have no idea why… however now the form works for me on all browsers if you can test to make sure id be grateful.

Even if it works now, the strange source code is still included in the page. If your form processing can suddenly handle it, it’s fine – but surprising.

@threadi yes i think some of that source code is from plugins, but as long as it works its ok.

One thing i have noticed is that the search function of my site has stopped working im not sure whether this has been a conflict with the new form.

The fact that the search no longer works could have something to do with this strange script. You should get an overview of which plugin is responsible for what.

I tested your page on both the browsers and the errors are still there and it just clears my form. I think the best approach for troubleshooting, like @threadi mentioned, would be to figure out which plugin is causing the extra fields to be added to your form.

Are you using any plugin for the search feature?

@kaavyaiyer really? I’ve just tested on chrome safari and edge and all seem to be working for me now.

The only thing I am using for a plug-in to do with search is a live search plugin option.

Nothing else.

I deactivated all plugins and the search still didn’t work for some reason.

The search form cannot be submitted because the jQuery from https://malsup.github.io/jquery.form.js that is included via your code sets an event here that prevents the search form from being submitted.

@threadi even when i have removed this it still doesn’t work.

I can still see it in the source code of the page. Therefore the search still does not work.

My advice would be that you look for someone who can support you directly. Within the framework of the forum this becomes more and more difficult.

• The topic ‘Jquery not working with Safari browser’ is closed to new replies.
• In: Fixing WordPress
• 3 participants
• Last reply from: darrellwilde
• Last activity: 2 years ago
• Status: not resolved

Topics with no replies

Non-support topics, resolved topics, unresolved topics.