why onload event not working?

Question

here is my codes:

$('.classname').on('click',function myfunc() {
  alert ('working ..!');
});

the above code works correctly and when I click on the div .classname, it gives me a message: working ..!

Now I want to use of that function (myfunc) for onload event. here is my try:

window.onload = myfunc;
window.onload = myfunc();
document.onload = myfunc();
<body onload = "myfunc()">
object.onload=myfunc(){alert ('working ..!');}

but none of them does not works. Why ?! Why, when I refresh the page don't see any message ? How can I fix it ?

Because myfunc is declared inside the call to on(). You need to declare it outside of there so its scope is global. — dmeglio, Jul 20 '15 at 18:22
http://stackoverflow.com/questions/588040/window-onload-vs-document-onload See this — José Francisco, Jul 20 '15 at 18:22
@Sushanth-- yes. look my first codes. `function myfunc() { alert ('working ..!'); });` — Shafizadeh, Jul 20 '15 at 18:22
@Sajad . But looks like that is an anonymous function which is the event handler. Move it out and declare a function outside it instead. — Sushanth --, Jul 20 '15 at 18:24
@Sushanth-- your mean is I remove this: `$('.classname').on('click',);` ? I did it before asking. won't works. — Shafizadeh, Jul 20 '15 at 18:27
@Sajad From your working code example, It seems that you are using jQuery. If this is the case why don't you try `$( window ).load(function() { // function code });` as given on 'https://api.jquery.com/load-event/' — Sameer Mahant, Jul 20 '15 at 18:30
@SameerMahant — Because the question is about reusing the existing function, not declaring a duplicate of it. — Quentin, Jul 20 '15 at 18:30

Quentin · Accepted Answer · 2015-07-20T19:06:32.410

2

$('.classname').on('click',function myfunc() {
  alert ('working ..!');
});

You have created a named function using a function expression. You have passed it to on().

Because it is a function expression, you are not creating a variable called myfunc in the current scope. It is accessible only from inside itself, and from within the on function.

Use a function declaration instead.

function myfunc() {
  alert ('working ..!');
}
$('.classname').on('click', myfunc);
$(document).on('load', myfunc);

Further reading on function declarations and expressions can be found on MDN.

edited Jul 20 '15 at 19:06

answered Jul 20 '15 at 18:28

Quentin

914,110
126
1,211
1,335

your example worked correctly. but in reality does not works for my codes. please check out my update ... – Shafizadeh Jul 20 '15 at 18:36
@Sajad — Why would the document's load event have a `(this).attr("href")`? It isn't a link. It's a document. – Quentin Jul 20 '15 at 18:47
ow !!!! I see. that's the problem, ok well, how can I get the end of url ? here is my URL: `www.example.com/contact#test`, now I need to `test`, how can I get that ? – Shafizadeh Jul 20 '15 at 18:49
Read it from [the `location` object.](https://developer.mozilla.org/en-US/docs/Web/API/Location) – Quentin Jul 20 '15 at 18:52
still I can not get `test` ! should I use of `url.hash` ? – Shafizadeh Jul 20 '15 at 19:00
@Sajad — If you have a new question, then [ask a new question](http://stackoverflow.com/questions/ask). Provide a link to this one if it helps provide context. Provide a [test case](http://sscce.org/); your comments on my answer don't provide enough information to tell what your new problem is. – Quentin Jul 20 '15 at 19:02
ok, I will aks a new question. but I'm waiting for *your* answer :-) ! – Shafizadeh Jul 20 '15 at 19:04
waiting for you [here](http://stackoverflow.com/questions/31524522/how-can-i-get-hashtag-part-of-the-url-using-jquery) – Shafizadeh Jul 20 '15 at 19:13

score 0 · Answer 2 · answered Jul 20 '15 at 18:21

0

The scope of the function is not global so you need to declare it outside the click event.

answered Jul 20 '15 at 18:21

Kaspersky

95
1
11

and how can I fix it ? – Shafizadeh Jul 20 '15 at 18:26
1

regarding scope: it doesn't need to be global, but it does need wider scope that when it's defined inside the 'click' event handler. – Octopus Jul 20 '15 at 18:32

Patrick Ferreira · Answer 3 · 2015-07-20T19:17:05.480

0

what about using ready event instead of load? as you can read in jquery documentation :

.load() Bind an event handler to the “load” JavaScript event.

.ready() Specify a function to execute when the DOM is fully loaded.

In my opinion, the full dom should be fully loaded (ie, size of element already set and computed for scroll...)

function scroll() {
    alert('test');
     return false;
}

$('.link').on('click', scroll);
$(document).on('ready', scroll);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link">manual test</a>

EDIT Answer for inital post. Carefull, I saw that you put spaces between prop key and value <body onload = "myfunc()"> you can't do this. It should be key=value

var myfunc = function() {
  alert ('working ..!');
}

<body onload="myfunc()">
  <a onclick="myfunc()">manual test</a>
</body>

edited Jul 20 '15 at 19:17

answered Jul 20 '15 at 18:54

Patrick Ferreira

1,983
1
15
31

héhé! thx :) maybe you can "valid" the answer for other users ;) – Patrick Ferreira Jul 20 '15 at 19:02
1

I think you are looking for the word "accept", and since it doesn't solve the problem (either the original one or the extra one added in edits), it shouldn't be accepted. – Quentin Jul 20 '15 at 19:04
@Quentin `ready` seems to wait for all downloads and paintings/renderings to trigger event.... [more info in jquery doc](https://api.jquery.com/ready/) – Patrick Ferreira Jul 20 '15 at 19:07
Umm. It *doesn't* wait for the dependancies. The point is that if you are waiting for something, then `load` is more likely to wait long enough than `ready`. Since the OP is trying to scroll to a particular point in the document, it is *desirable* to use `load` over `ready` so that images can be loaded and the document reflowed to accommodate them. Switching to `ready` is likely to introduce additional problems. – Quentin Jul 20 '15 at 19:10
I understand what you mean, but strangly, `load` don't triggers on tests. Maybe we should attach the listner to `window` instead of `body` as in jquery recommandation – Patrick Ferreira Jul 20 '15 at 19:25
"I saw that you put spaces between prop key and value `` you can't do this." — Yes, you can. It is perfectly valid and supported. – Quentin Jul 20 '15 at 21:00
You should attach the `load` listener to `document` as per the answer I gave previously. – Quentin Jul 20 '15 at 21:01

why onload event not working?

3 Answers3