locked
Click function doesn't work in IE11 RRS feed

  • Question

  • User657329123 posted

    Hello,

    In my view I have a submit button like this

    <input type="submit" value="Submit" id="btnSubmit" name="btnSubmit" />

    When user clicks on Submit button, I'm calling a jQuery function but it doesn't work in IE 11. It works in Edge, Firefox, Chrome. Any idea why and how should I fix this issue?

    $(document).ready(function () {
          $('#btnSubmit').on('click', function () {
          ...
         });
    });

    joe

    Friday, January 22, 2021 5:37 PM

All replies

  • User475983607 posted

    Hello,

    In my view I have a submit button like this

    <input type="submit" value="Submit" id="btnSubmit" name="btnSubmit" />

    When user clicks on Submit button, I'm calling a jQuery function but it doesn't work in IE 11. It works in Edge, Firefox, Chrome. Any idea why and how should I fix this issue?

    $(document).ready(function () {
          $('#btnSubmit').on('click', function () {
          ...
         });
    });

    joe

    We have no idea what "doesn't work" means to you.  The code shown is a bug because the submit button will cause a POST.  The click handler will execute but the whole page is refreshed due to the submit which overwrites the JavaScript. 

    Friday, January 22, 2021 9:07 PM
  • User657329123 posted

    Doesn't work means in Edge, Chrome and Firefox code inside click handler gets executed but not in IE 11. Inside click handler there is some validation code which gets executed in other browsers but control doesn't enter the click handler in IE11.  Is this a bug in IE 11? I need to call a JavaScript function to do some validation. If certain fields fail validation then I need to stop form submission and display message.

    Monday, January 25, 2021 1:04 PM
  • User475983607 posted

    Doesn't work means in Edge, Chrome and Firefox code inside click handler gets executed but not in IE 11. Inside click handler there is some validation code which gets executed in other browsers but control doesn't enter the click handler in IE11.  Is this a bug in IE 11? I need to call a JavaScript function to do some validation. If certain fields fail validation then I need to stop form submission and display message.

    I cannot reproduce this problem in IE11 using jQuery v3.5.1.   I assume there is something else wrong with your code.  Use dev tools to debug your code.

    Below is my test code.

    <form method="post">
        <input id="btnSubmit" type="submit" value="submit" />
    </form>
        <script>
            $(document).ready(function () {
                $('#btnSubmit').on('click', function (e) {
                    e.preventDefault();
                    console.log("Clicked");
                });
            });
        </script>

    Monday, January 25, 2021 1:46 PM
  • User753101303 posted

    Hi,

    Do you mean that this event is not handled at all or could it be that the code you don't show fails? Always start by using  https://developers.google.com/web/tools/chrome-devtools (you have the same tools in most if not all browsers, use F12 in IE). It should allow to see what happens exactly rather than just that "it doesn't work". For example F12 Console allows to see JavaScript or browser messages, you can debug JavaScript code, see what happens for http Ajax queries, inspect and change CSS etc....

    For now I suspect IE11 could be in a legacy mode (you can see that with F12 and the "Emulation" tab) which is not supported by jQuery or that this event is called but that the code you don''t show fails.

    I'm likely often a bit heavy on that but IMHO learning how to use this kind of tools is an essential step in shortening the time you spend in debugging. Past the initial learning curve It is likely much shorter to take few minutes to use those tools, find the exact problem and then fix this problem rather than trying to guess what could happen and trying each fix until you finally find the right guess.

    Monday, January 25, 2021 2:01 PM