jQuery nested functions

Question

I am still new to JavaScript and jQuery, so I am confused as to why the following code is not working as I anticipated. All I am trying to do is save input on a button click (id=recordInput) and display it with another button click (id=displayInput). What I observe is that tempInput is stored, (the code works until that point) but assignment of displayInputs onclick attribute is not executed. My question is, can you not nest a $().click() call inside of another &().click() call?

<script>
$(document).ready(function () {

    $('#recordInput').click(function(event) {
        var tempInput = $('#testInput').val();
        &('#displayInput').click(function(event) {
            console.log(tempInput);
        });
    });
});

</script>

My thinking is this in pseudocode:

assign recordInput onclick attribute to the following function:
store tempInput
set displayInput onclick to alert the tempInput value

what is wrong with my thinking?

NOTE: I did not include any html tags but all of the ids are referenced correctly

Like stated above you used a & instead of a $. Please check your console before posting. — Jordan Schnur
– Jordan Schnur, Commented Jan 22, 2016 at 0:54
In addition to the typo, your design is suspicious. It's almost always wrong to declare one event handler inside another. Every time you click on recordInput, it's going to add an additional click handler to displayInput, so the second function will run multiple times when you click on it. — Barmar
– Barmar, Commented Jan 22, 2016 at 1:27

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ · Accepted Answer · 2016-01-22 01:01:04Z

1

It's not working because you have put & instead of $ here

$('#displayInput').click(function(event) {

Fixing this may work, but you shouldn't set event handlers this way. Because every time your first handler function is called it will set an event handler for the second one. You can try with your console.log and you will see that the number of console.log is increasing by every click on #recordInput. So you should better set it like this :

var tempInput;
$('#recordInput').click(function(event) {
    tempInput = $('#testInput').val();
});
$('#displayInput').click(function(event) {
    console.log(tempInput);
});

answered Jan 22, 2016 at 1:01

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

4,2261 gold badge27 silver badges55 bronze badges

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

Comments

StackSlave · Accepted Answer · 2016-01-22 01:04:35Z

0

I would change

$(document).ready(function () {

    $('#recordInput').click(function(event) {
        var tempInput = $('#testInput').val();
        &('#displayInput').click(function(event) {
            console.log(tempInput);
        });
    });
});

to

$(function(){

var testInput = '';
$('#recordInput').click(function(){
  testInput = $('#testInput').val();
});
$('#displayInput').click(function(){
  if(testInput !== ''){
    console.log(testInput);
  }
});

});

You are using & instead of $. Of course, you don't have to format the code exactly like I did.

edited Jan 22, 2016 at 1:04

answered Jan 22, 2016 at 0:55

StackSlave

10.6k2 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

jQuery nested functions

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related