I've been facing this weird behavior for a while now and can't find any workaround.

There is a button with certain methods called on click. In Firefox works well. In Chrome it just refreshes the whole page.

$("#modoComparativa").click(function(){
   if($(this).hasClass("active")){
                $('#histFromDate').attr("placeholder","Date 1");
                $('#histToDate').attr("disabled","disabled").attr("placeholder","Date 2");
                startDatepickerComp();
            }
            else{
                $('#histFromDate').attr("placeholder","Initial date");
                $('#histToDate').attr("disabled","disabled").attr("placeholder","Final date");
                startDatepicker();
            }
            $('#clearDates').attr("disabled","disabled");
            // This function calls another function causing the odd behavior in Chrome
            requestGraph(idDetail, idArea, "", "");
        });

<script src=".1.1/jquery.min.js"></script>

I've been facing this weird behavior for a while now and can't find any workaround.

There is a button with certain methods called on click. In Firefox works well. In Chrome it just refreshes the whole page.

$("#modoComparativa").click(function(){
   if($(this).hasClass("active")){
                $('#histFromDate').attr("placeholder","Date 1");
                $('#histToDate').attr("disabled","disabled").attr("placeholder","Date 2");
                startDatepickerComp();
            }
            else{
                $('#histFromDate').attr("placeholder","Initial date");
                $('#histToDate').attr("disabled","disabled").attr("placeholder","Final date");
                startDatepicker();
            }
            $('#clearDates').attr("disabled","disabled");
            // This function calls another function causing the odd behavior in Chrome
            requestGraph(idDetail, idArea, "", "");
        });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If I ment out everything but the selector and the call to the click method, the behavior is the same. It refreshes everything.

I can't figure out how to debug this as each time I press the button, the whole page refreshes and no log/errors remains in the browser debugger.

Any ideas would be appreciated.

Edit - Addition of the selector as requested:

<div class="form-group"><button class="tooltip3 btn btn-default glyphicon glyphicon-random" id="modoComparativa" data-toggle="tooltip" title="ACTIVAR COMPARATIVAS" data-placement="bottom"></button>
                            </div>

• javascript
• jquery
• html
• google-chrome

• 1 Can you add the markup for the #modoComparativa element? Also, in chrome, you can click the "Preserve log" checkbox above the console and it will not clear when the page refreshes. – Will P. Commented Dec 20, 2016 at 18:45
• Added as an edit. Will try the Preserve log feature, thanks for your time. – lenord Commented Dec 20, 2016 at 18:50

2 Answers 2

Add a return false to your click callback to prevent actions due to your html syntax (like form submission or clicking on a anchor tag).

$("#modoComparativa").click(function(event){
    event.preventDefault();

    // your existing code
}

Edit: Since you added your html...

If your button is within a form, you can also add the type="button" attribute to prevent it from submitting your form.

<button type="button" class="tooltip3 btn btn-default glyphicon glyphicon-random" id="modoComparativa" data-toggle="tooltip" title="ACTIVAR COMPARATIVAS" data-placement="bottom"></button>

Thank you to lonesomeday for suggesting http://api.jquery./event.preventDefault/

I added an answer which could be useful for people stumbling here but having other causes for this behavior. This kind of unexpected random reload can be due to several causes:

• As stated in other answers a link which propagates the click and then performs a GET on the page itself
• An image tag <img> where the src is empty or invalid, the browser will attempt to load the image using GET, but will in fact refresh the page instead (empty = relative to the page = page). Even a hidden image will be loaded, so this can be tricky to find, use the browser console !
• Some javascript logic which refreshes the page programmatically in some conditions (session expired, token expired ...)
• A browser 'feature', for example: https://support.mozilla/en-US/questions/1204335, or https://superuser./questions/1048029/disable-auto-refresh-tabs-in-chrome-desktop

In any case use the browser console and look for suspect GET calls to the page itself or redirects.