jQuery 嵌套函数变量范围

Question

即使我相信我使用的是全局变量，我也无法在按钮的单击事件函数内的嵌套函数之外填充嵌套变量值。

将值拉入嵌套函数外部的控制台日志中我做错了什么？

我正在使用带有 ajax 和 php 的 jquery 弹出窗口创建一个购物车。我可以将商品添加到购物车以及添加姓名和电子邮件输入字段。

当我进入 Chrome 中的控制台登录以获得它们显示值的字段的焦点事件时，但是当尝试使用 Checkout 按钮时，即使使用全局变量，我也无法在嵌套函数之外的 Checkout 单击中传递数据.

--JS--

   var formname;

$(document).ready(function() {

...

    $(document).on('click', '#check_out_cart', function(){            

          $('#cart-popover').popover({

                html : true,

                container: 'body',

                content:function(){

                  return $('#popover_content_wrapper').html();

                }

          });      

           $(document).on('click', '#cart-popover', function(){    

                  $('input#namef').focus();                   

          });

            $('input#namef').on('focusout', function(){                  

                    formname= $('input#namef').val();                         

                    console.log(formname);

            });

            var scart_add = $("input[name='scart_add']").val();

            console.log("Scart value is "+scart_add);

            console.log("Name is "+formname);

            ...

    });

});

--HTML--

 <div class="container">

              <nav class="navbar navbar-default" role="navigation">

                <div class="container-fluid">

                  <div class="navbar-header">

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">

                    <span class="sr-only">Menu</span>

                    <span class="glyphicon glyphicon-menu-hamburger"></span>

                    </button>                    

                  </div>

期待 input#namef 文本中的值出现在 console.log ...formname 变量中，但它只显示为“”。

Answer 1

这在某种程度上是一种竞争条件。在document.ready事件中，您正在设置点击事件处理程序在单击处理程序中，您正在设置focusout事件处理程序由于单击处理程序仍在执行，因此代码立即运行以显示 scart 和 formname 的值。那时，formname仍然是空的，因为当前函数（单击事件处理程序）仍在执行，并且 focusout 事件即使触发，也会在执行该代码后触发。您应该将focusout处理程序声明代码移到单击处理程序代码之外，然后将在 document.ready() 事件上设置两个处理程序。以下是正在发生的事情和时间的细分：var formname;&nbsp;$(document).ready(function() {这在加载 DOM 时触发（document.ready事件）&nbsp; &nbsp; $(document).on('click', '#check_out_cart', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;当用户点击某个带有 ID 的元素时会触发 check_out_cart&nbsp; &nbsp; &nbsp; &nbsp; $('input#namef').on('focusout', function(){&nbsp;此事件处理程序仅在用户单击购物车时设置，但尚未执行！&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formname= $('input#namef').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(formname);&nbsp; &nbsp; &nbsp; &nbsp; });一旦为 设置了事件处理程序，此代码就会触发focusout，但仍未执行。即使focusout触发了一个事件，它也只会在当前函数退出时执行。&nbsp; &nbsp; &nbsp; &nbsp; var scart_add = $("input[name='scart_add']").val();&nbsp; &nbsp; &nbsp; &nbsp; console.log("Scart value is "+scart_add);正确地，此时您将看到它formname是空的。&nbsp; &nbsp; &nbsp; &nbsp; console.log("Name is "+formname);&nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; });});希望这能解释您所看到的流程；在 Ryan Wilson 的回答中快速修复，将焦点处理程序声明移动到单击处理程序之外的 document.ready 处理程序的范围内。

Answer 2

使用Unable to fetch values from an input element in Bootstrap's popover 中的解决方案，我能够调整我的 JS 代码，以使用 popover JS 添加的 .popover-content 类中的 .find 来获取值。&nbsp; &nbsp; var formname;&nbsp;&nbsp; &nbsp; var formemail;&nbsp; &nbsp; &nbsp; &nbsp;$(document).ready(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //shopping cart&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /*load functions*/&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; load_product();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; load_cart_data();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#cart-popover').popover({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html : true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; container: 'body',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; content:function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return $('#popover_content_wrapper').html();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(document).on('click', '#cart-popover', function(){&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('input#namef').focus();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(document).on('focusout', '#namef', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formname = $('.popover-content').find('#namef').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(document).on('focusout', '#emailf', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; formemail = $('.popover-content').find('#emailf').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$(document).on('click', '#check_out_cart', function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var scart_add = $("input[name='scart_add']").val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var nameval = $("input#namef").val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Scart value is "+scart_add);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Name is "+formname);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Email is "+formemail);&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });});