Simple jQuery Toggle Not Working in Internet Explorer 11

user_2299829 0
Viewed 325

I have built a very simple show/hide toggle in jQuery. It works on every browser that I have tried (Chrome, Safari, FireFox on Mac & Chrome, FireFox & Edge on Windows). I reviewed Chrome JavaScript Console in Developer, and there were no errors.

But my client uses IE11, and it is not working for them.

I created a jsFiddle HERE for them to test off-site, and they are not able to load it because jsFiddle doesn't support IE.

I also created a CodePen HERE for them to test as well, but it looks like CodePen doesn't support IE11 either.

I understand that IE11 is not the dominate browser, but that is what my client is wanting to test on. I am not sure why my code isn't working for them.

Can someone help me debug my code?

$(document).ready(function() {
  $("span.awesome").click(function(event) {
    event.preventDefault();
    $("div.findersearch").toggle();
  });
});
<p class="contacts"><span class="awesome"><i class="fa fa-search"></i></span></p>
<div class="formhide">
<div class="findersearch" style="display: none;">
    <form id="mod-finder-searchform763" action="/searchresults.html" method="get" class="form-search" role="search">
        <label for="mod-finder-searchword763" class="element-invisible findersearch">Search</label><input type="text" name="q" id="mod-finder-searchword763" class="search-query input-medium" size="25" value="" placeholder="Search ..."><button class="btn btn-primary hasTooltip search findersearch" type="submit" title="Go"><span class="icon-search icon-white"></span>Search</button>
                            <input type="text" name="6da3a870259695f000419f7ec6251833" value="" style="float: left; position: absolute; z-index: 1000000; left: -10000px; top: -10000px;"></form>
</div>
</div>
<script src="https://use.fontawesome.com/09f43ba218.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<p class="contacts"><span class="awesome"><i class="fa fa-search"></i></span></p>
<div class="formhide">
<div class="findersearch" style="display: none;">
    <form id="mod-finder-searchform763" action="/searchresults.html" method="get" class="form-search" role="search">
        <label for="mod-finder-searchword763" class="element-invisible findersearch">Search</label><input type="text" name="q" id="mod-finder-searchword763" class="search-query input-medium" size="25" value="" placeholder="Search ..."><button class="btn btn-primary hasTooltip search findersearch" type="submit" title="Go"><span class="icon-search icon-white"></span>Search</button>
                            <input type="text" name="6da3a870259695f000419f7ec6251833" value="" style="float: left; position: absolute; z-index: 1000000; left: -10000px; top: -10000px;"></form>
</div>
</div>

internet-explorer-11 jquery javascript
1 Answers

I try to test your code and it looks like your code is working fine with the IE 11 browser.

Here is my test result:

enter image description here

It can be a cache related issue on your client's side.

You can suggest them to clear the cache for that site in the IE browser. They can press CTRL + F5 key to hard refresh the page.

Another thing they can do is to open the developer tools and go to the Network tab and check whether all the scripts files are properly loading or not.

Here, I want to confirm with you whether you are able to run this sample in the IE 11 on your side or not? It can help to narrow down the issue.

If the issue persists on your client's side then you can try to provide more information about their test environment like OS build etc. It can help to understand the issue in a better way.

user_103093810
Related