Question

I’m having an issue with a function I’m calling (using jQuery).
My issue is that when I attempt call a function within another function, that first one is not being called. However, when I place the contents of the failed function into the one calling said failed function, the code executes fine. I’ll show you what I’m talking about:

$('form.register .submit').click(validateRegister);

function submitStart() {

    var $this = $(this);
    $this.parent().addClass('processing');

    var $processing = $('#processing');
    $processing.show();

    var $endNote = $this.parent().find('#endNote')
    $endNote.slideDown();

}

function validateRegister(){

    submitStart();

}

See, when the contents of submitStart() are places into the validateRegister(), they code executes. However, when calling the function as it shows in this code, it fails to work. I’ve considered scope (at least to my knowledge) to no avail.

Any help is extremely appreciated, thank you!

Answer 1

You’re losing your expected this value, so the submitStart is likely getting called, but doesn’t work properly.

Do this:

function validateRegister(){

    submitStart.call( this );

}

Here you’re calling the submitStart method via the .call() method, which is available on function instances.

The .call() method lets you manually set the value of this in the function you’re calling.

So because you’ve assigned validateRegister as the handler, jQuery makes sure the value of this is your element. But since validateRegister is calling another function, it carries the responsibility of making sure that function has the proper this value.

---

Just keep in mind that when you call any function like this:

someFunction();

…the value of this in that function will be window, unless you manually set it to something else.