CODEWITHSUNDEEP
javascriptjquery
Daniel Speich
Daniel Speich

Reputation: 3

Jquery onclick function executes on page load

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/

Upvotes: 0

Views: 1482

Answers (4)

KL_
KL_

Reputation: 1513

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"/>

Upvotes: 0

Nope
Nope

Reputation: 22329

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>

Upvotes: 3

Alex Ironside
Alex Ironside

Reputation: 5039

Both above answers are correct. searchFunction() executes the function. You can also do

$("#search-button").on("click", function(){searchFunction()});

Upvotes: 0

mdatsev
mdatsev

Reputation: 3879

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

Upvotes: 2

Related Questions