I have this code:
function beforemouseout() {
if ($(this).val() == '') {
$(this).val($(this).attr('title'));
}
else {
}
setTimeout('beforemouseout()',3000);
}
$(".other").click(function() {
$(this).val('');
$(".other").mouseout(beforemouseout);
});
<input id="hour" type="text" class="other" autocomplete="off" value="hour" title="hour" />
<input id="hour" type="text" class="other" autocomplete="off" value="minutes" title="minutes" />
But Firebug gives me an error: beforemouseout is not defined. Why? I tried it on jsfiddle.net and it doesn't give an error , but the result is not what I expected.I expected when i click on #hour to hide the text and when onmouseout is triggered to wait 5 second and then - to do the checks
Change your setTimeout like this:
setTimeout(beforemouseout ,3000);
Otherwise it's looking for beforemouseout in a global context, and if your code isn't in there (it's inside/scoped to another closure of any kind), it won't find it. I'm guessing here that it's in a ready handler because you're posting HTML right beside it, meaning you're taking snippets.
From an overall standpoint, never pass a string to setTimeout() or setInterval() if you can avoid it, it results in many unwanted side-effects...like this one. Instead, pass a direct reference like I have above, to be entirely explicit and well...make it work :)
Edit (for question comments): it seems what you're actually after it still a bit different than it's written. From what I gather you want to delay before restoring the default value to the <input>. There are several ways to do this, here's one:
function beforemouseout() {
if ($(this).val() == '') {
$(this).val($(this).attr('title'));
}
}
$(".other").click(function() {
$(this).val('').mouseout(function() {
setTimeout($.proxy(beforemouseout, this), 3000);
});
});