Search code examples
javascriptruby-on-rails-4onclickdom-eventsmicrosoft-edge

Click not triggering for modal in IE Edge

I am having trouble opening a modal in Microsoft Edge only.

The link to open the modal is:

<%= link_to the_path, class: "btn btn-tertiary class-used-to-find-the-link", data: {"things-id" => 4, "other-things-id" => 7} do %>
  <span>The Link's Text</span>
<% end %>

The JavaScript for the link is:

$('class-used-to-find-the-link').click(onClick);

The onClick method mentioned above would be something like:

onClick   =   function(event) { 
                 //blah..blah...blah
              };

The .click does not get triggered in IE Edge only but works in all other browsers. This link above is supposed to open a modal. I have other instances of .click that don't open modals and these are fine.

So, I think it may be related to the discussion here: Microsoft Edge: onclick event stops working?. Similar to the post linked, when I refresh the page the link does work and the modal opens.

Also, if I firstly open the page that contains the link to click in another tab, via right click and 'Open In New Tab', then the link will also work.

I have tried some of the answers in the post I have linked, including mousedown and mouseup but these didn't work.

Any help is appreciated.

Solution

  • This was being caused by Turbolinks and was not related to the SO question and answer here: Microsoft Edge: onclick event stops working?. So, in a way the comment of the link here: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5782378/ was valid.

    I disabled Turbolinks in the same fashion and in the answer here: https://stackoverflow.com/a/27196250/1945948

    Specifically, the issue was being caused by how turbolinks and event handlers combine. An alternative to disabling Turbolinks would be to use delegated event handling. Here, is a good article on delegated event handlers: https://www.iexposure.com/industry-insights/rails-4-turbolinks-and-delegated-event-handling-in-jquery.