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.
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);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments