1

I've inherited a badly programmed website. It happens to use jQuery v2.1.3 (against which I have no general complaints). On a page I've placed a select dropdown list. When a user changes the selection in this list, the page refreshes.

In Chrome developer tools, the change event listener turns out to be a line in the generic jQuery library that's loaded, from what I can see. The event handler is this: 

if ( !(eventHandle = elemData.handle) ) {
    eventHandle = elemData.handle = function( e ) {
        // Discard the second event of a jQuery.event.trigger() and
        // when an event is called after a page has unloaded
        return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
            jQuery.event.dispatch.apply( elem, arguments ) : undefined;
    };
}

There is currently no JavaScript hooked up to this field (besides whatever's latching on to it by virtue of it merely being present in the page).

My question is how to prevent this from happening. I don't want pages to refresh whenever select lists happen to be changed, just because jQuery is loaded.

ETA: On the suggestion of @theAnubhav below, I've updated the outputted HTML to the below, but the page still refreshes on change: 

<div class="field"><select id="field4860fb3b7d994e8d964fc71b24e32752">
  <option value=""></option>
  <option value="AF">Afghanistan</option>
  <option value="AL">Albania</option>
  <option value="DZ">Algeria</option>
  <option value="AD">Andorra</option>
  <option value="AO">Angola</option>
  <option value="AR">Argentina</option>
  <option value="AM">Armenia</option>
  <option value="AU">Australia</option>
  <option value="AT">Austria</option>
  <option value="AZ">Azerbaijan</option>
  <option value="BS">Bahamas</option>
  <option value="BH">Bahrain</option>
  <option value="BD">Bangladesh</option>
  <option value="FR">France</option>
  <option value="DE">Germany</option>
  <option value="US">United States</option>
</select>
<script>$('#field4860fb3b7d994e8d964fc71b24e32752').on('change',function(e){ e.stopPropogation(); });</script>
</div>
Iucounu
  • 1,630
  • 1
  • 20
  • 31
  • `There is currently no JavaScript hooked up to this field` there has to be. Changing a select won't affect the page that's loaded unless it's told to by outside logic. – Rory McCrossan Mar 28 '18 at 09:30
  • I may be wrong but I seriously doubt it is jQuery refreshing the page by default. It's more than likely some custom javascript code attached to the dropdown. – Steve Mar 28 '18 at 09:31
  • Can you share the html and JS code? – Pramod Patil Mar 28 '18 at 09:31
  • @RoryMcCrossan , I'm sorry for being unclear. I meant to convey that I haven't added any JavaScript to the field. I've been unable to find what may be adding an event handler to the field--Chrome developer tools merely points to that generic-looking part of jQuery itself. – Iucounu Mar 28 '18 at 10:11
  • @PramodPatil , I've added the HTML above. The page is large and in a non-public test environment. The code involved appears to be an unchanged jQuery v.2.1.3 . – Iucounu Mar 28 '18 at 10:12
  • Use [this method](https://stackoverflow.com/questions/2008592/can-i-find-events-bound-on-an-element-with-jquery) to find what events are bound to the element. Then you can search through your code base to find where that is defined – Rory McCrossan Mar 28 '18 at 10:21
  • @RoryMcCrossan Thank you! I guess I should have realized that was the issue (not knowing what events were attached) and searched accordingly. Much appreciated. – Iucounu Mar 28 '18 at 10:56
  • 1
    No problem, glad to help. – Rory McCrossan Mar 28 '18 at 10:57

1 Answers1

0

You will need to override this event with another custom event to prevent this event from executing for your dropdown. You need to use event.stopPropogation/event.stopImmediatePropogation in event handler for this dropdown, something like,

$('#mycustomdropdown').on('change',function(e){
    /* some more custom code */
    e.stopPropogation();
});

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

theAnubhav
  • 535
  • 6
  • 16
  • You're assuming that the mystery event handler is bound to a parent element which is relying on event bubbling. This is *highly* unlikely. – Rory McCrossan Mar 28 '18 at 10:58
  • Also, adding an event handler specifically to stop another event is pretty nasty, an absolute last resort, only to be considered if you have no control over the first handler, and there is no way to avoid it happening. – Don't Panic Mar 28 '18 at 12:05