Trying to prevent Javascript from running on page load

Question

I'm trying to add an onChange event handler to two element of my html page. Sadly the event is firing when the page loads which is causing downstream issues.

$("#Division").on('click', onChangeFilter());
$("#Program").change(onChangeFilter());

function onChangeFilter() {
   alert("Fired to soon....");
};

The associated HTML for testing looks like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
</head>
<body>
   <div id="DivisionSelection">
     <select id="Division" data-filterprogramcontrol="Program">
       <option value="-1">Select Division</option>
       <option value="1">Item 1</option>
       <option value="2">Item 2</option>
       <option value="3">Item 3</option>
     </select>
  </div>    
</body>
</html>

Is adding the .change event causing a 'change' and triggering the function? The two closest posts I was able to find are located here and here but I feel their issues were more transparent. Nothing was obvious to me in the jQuery API indicating this behavior. I just started transitioning to the web world in my course work, maybe I'm not understanding correctly the dynamics of how a page loads the DOM. I thought this page useful but not sure how accurate. Thank you in advance for the guidance.

Remove the invoking parenthesis -- $("#Division").on('click', onChangeFilter);. This will pass the function itself as a reference to be invoked later by the event. — Jonathan Lonowski
– Jonathan Lonowski, Commented Apr 2, 2015 at 3:39
@Xufox, forgot in this example to specify this is a selection Div, updated. Thank you for pointing this out. — TargetofGravity
– TargetofGravity, Commented Apr 2, 2015 at 13:06

Jonathan Lonowski · Accepted Answer · 2015-04-02 04:12:42Z

9

You'll want to remove the invoking parenthesis after each use of onChangeFilter:

$("#Division").on('click', onChangeFilter);
//                                      ^^
$("#Program").change(onChangeFilter);
//                                ^^

This treats the function as any other (object) value, passing it as an argument to .on() and .change() for them to use and for the events to invoke when they've been triggered.

Otherwise, with the parenthesis, the function is being called first and its return value is instead passed to .on() and .change(), similar to:

var result1 = onChangeFilter();
$("#Division").on('click', result1);

var result2 = onChangeFilter();
$("#Program").change(result2);

edited Apr 2, 2015 at 4:12

answered Apr 2, 2015 at 3:58

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TargetofGravity Over a year ago

thank you for the example and comment above. That does make sense.

kangaswad · Accepted Answer · 2015-04-02 05:02:47Z

When you write like this:

$("#Division").on('click', onChangeFilter());

you are calling it. The () after method name means you are calling it. Just write the method name there.

The code more-less should be like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script>
    $(document).ready(function() {
        var onChangeFilter = function(evt){
           alert("Fired to soon....");
        };
        $("#Division").on('click', onChangeFilter);
        $("#Program").on('change', onChangeFilter);

    });
</script>
</head>
<body>
   <div id="Division">
     <select id="Program">
       <option value="-1">Select Division</option>
       <option value="1">Item 1</option>
       <option value="2">Item 2</option>
       <option value="3">Item 3</option>
     </select>
  </div>    
</body>
</html>

Collectives™ on Stack Overflow

Trying to prevent Javascript from running on page load

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related