jquery - selected button value, when assigned to a variable returns undefined -

jquery - selected button value, when assigned to a variable returns undefined -

this returns selected value , works fine:

$('document').ready(function () { $(document).on('click', '#square', function () { confirm($('input[type="radio"][name="plot"]:checked').val()); }); });

this returns undefined:

$('document').ready(function () { var $userinput; $userinput = $('input[type="radio"][name="plot"]:checked').val(); $(document).on('click', '#square', function () { confirm($userinput); }); });

what problem here?

in first scenario grab value on click, in sec value on page load.

solution: grab value in event handler first illustration shows.

jquery