Loading javascript function on button event

Question

I would like to call a Javascript function once the button is displayed on screen. What I am looking for is similar to the 'onclick' attribute:

<input type="button" class="button-class" onclick="function(this)">

However, I would like the function to be called as soon as the button is displayed on screen i.e. it should be instantaneous (button creation=function call). I have already tried 'onload' but this does not seem to work. Is there a way to do this please?

Thank you

If you're creating the button using Javascript, just put the call to the function after that code. — Barmar
– Barmar, Commented Feb 7, 2018 at 18:29
@Barmar the button is being created using HTML as shown in the above code snippet. — Questionnaire
– Questionnaire, Commented Feb 7, 2018 at 18:37

Javier Gonzalez · Accepted Answer · 2018-02-07 18:42:16Z

3

Put an script element invoking the function after the button element

<input type="button" class="button-class" onclick="fn(this)" value="button" id="btn">
<script>
  function fn(obj){
     console.log(obj)
  }
  fn(document.getElementById("btn"));
</script>

answered Feb 7, 2018 at 18:42

Javier Gonzalez

1,0157 silver badges14 bronze badges

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

2 Comments

Gerardo BLANCO Over a year ago

this is a bad solution, you are running your function whe the document loads, not the input tag. What if append the button via js. This will not work

Barmar Over a year ago

@GerardoBLANCO In a comment the questioner has clarified that it's being creating using HTML, not JS.

CodeLover · Accepted Answer · 2018-02-08 06:56:38Z

2

@Questionnaire, you can't do what you want since an action should take place for a button (click event) to execute code.

As a good practice, load your Javascript code after the page is done loading. This is to avoid blocking the rendering of HTML code since Javascript is synchronous.

    ...
    <script type="text/javascript">
        function init() {
            // Code for your button function here
        }
        window.onload = init();
    </script>
 </html>

The code above is pretty much it.

answered Feb 8, 2018 at 6:56

CodeLover

5692 silver badges11 bronze badges

Comments

Obie · Accepted Answer · 2018-02-07 18:30:59Z

1

Just write the function name in onclick property instead of function(this) like the following..

<script>
    function myFunc(e){
        //do something
    }
</script>
<input type="button" class="button-class" onclick="myFunc(this)">

answered Feb 7, 2018 at 18:30

Obie

3023 silver badges8 bronze badges

1 Comment

Questionnaire Over a year ago

I do not want the action to be performed on button click. I want the action to be performed as soon as the button is created.

Gerardo BLANCO · Accepted Answer · 2018-02-07 18:56:35Z

1

@Bartman pointed out how the .ready() funtion handled it as a document.ready.

So i came up with a small solution to run the waanted funtion once the input button is created. Hotfix but cant imagine another solution

I hope this helps. If not please add a comment so i can edit the answer.

function clickFunc(e) {
  alert("click event");
}

function loadFunc() {
  alert("load event");
}

$("#button").click(function() {
  $("div").append("<input id=\"but\" type=\"button\" class=\"button-class\" onclick=\"clickFunc(this)\">");
  $("body").append("<script>loadFunc();<\/script>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="button" type="button">
<div></div>

edited Feb 7, 2018 at 18:56

answered Feb 7, 2018 at 18:43

Gerardo BLANCO

5,6481 gold badge19 silver badges36 bronze badges

6 Comments

Barmar Over a year ago

There's no ready event for buttons, this is treated the same as $(document).ready.

Gerardo BLANCO Over a year ago

@Barmar mmmmm. Didnt know that

Barmar Over a year ago

It's in the documentation you linked to: This is because the selection has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior.

Gerardo BLANCO Over a year ago

@Barmar you are 100% correct. im working in another solution

Gerardo BLANCO Over a year ago

@Barmar the best solution i can find, is to add the code after the append

|

Collectives™ on Stack Overflow

Loading javascript function on button event

4 Answers 4

2 Comments

Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related