I'm trying to assign a function to a button, but for some reason when the page loads, the function is executed, even when I didn't click anything:
$("#search-button").on("click", searchFunction());
function searchFunction(){...}
Code here: https://jsfiddle.net/gbx9gtdw/
You need to pass the function not the result of the function.
Change this:
$("#search-button").on("click", searchFunction());
to this:
$("#search-button").on("click", searchFunction);
Using searchFunction() with the () at the end executes the function, causing you to pass the result of the function to the event handler.
While passing it like this searchFunction passes the reference to the function as expected.
Using the relevant code from your fiddle:
$("#search-button").on("click", searchFunction);
function searchFunction() {
$(".search-results").append("fefe");
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="wrapper outer search-form">
<div class="middle">
<div class="inner">
<div class="row">
<div class="col-sm-3">
<span class="input-group-btn">
<a href="https://en.wikipedia.org/wiki/Special:Random">
<button class="btn btn-secondary" type="button">Random Article</button>
</a>
</span>
</div>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control" id="search-string">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" id="search-button">Search</button>
</span>
</div>
</div>
</div>
</div>
<div class="wrapper outer">
<div class="middle">
<div class="inner search-results">
</div>
</div>
</div>
</div>
Search button rather than when the page is loading. You might have other issues in your fiddle causing your code not to work, such as your script might be executing before the elements are actually in the DOM but that is a separate issue.
on("click", searchFunction('var string')); for example but if the function syntax changes how do we pass 'var string' to that?Replace with
$("#search-button").on("click", searchFunction);
This will attach the function to the on click event, otherwise you call the function when the page loads and attach the return value to the event
Both above answers are correct. searchFunction() executes the function. You can also do
$("#search-button").on("click", function(){searchFunction()});
When you call searchFunction with (), when the browser load, it will be interpreted as the request for a function execution.
To pass the function as argument, you need to remove the parentheses.
Anyway, if you feel more comfortable with the method you are using, you can place it inside another function.
Note: Only with $(buttonReference).on('click', function); you will have the option to work with the clicked element reference( $(this) ).
$('#btnWrong').on('click', print());
$('#btnRight1').on('click', print);
$('#btnRight2').on('click', function() { print(); });
function print(){
console.log('foo');
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnWrong" value="no print"/>
<input type="button" id="btnRight1" value="print as parameter"/>
<input type="button" id="btnRight2" value="print execution"/>