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; 

$(document).ready(function() {

这在加载 DOM 时触发（document.ready事件）

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

当用户点击某个带有 ID 的元素时会触发 check_out_cart

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

此事件处理程序仅在用户单击购物车时设置，但尚未执行！

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

                console.log(formname);

        });

一旦为 设置了事件处理程序，此代码就会触发focusout，但仍未执行。即使focusout触发了一个事件，它也只会在当前函数退出时执行。

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

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

正确地，此时您将看到它formname是空的。

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

        ...

    });

});

希望这能解释您所看到的流程；

在 Ryan Wilson 的回答中快速修复，将焦点处理程序声明移动到单击处理程序之外的 document.ready 处理程序的范围内。

Answer 2

使用Unable to fetch values from an input element in Bootstrap's popover 中的解决方案，我能够调整我的 JS 代码，以使用 popover JS 添加的 .popover-content 类中的 .find 来获取值。

    var formname; 

    var formemail;       

$(document).ready(function() {

          //shopping cart

          /*load functions*/

          load_product();

          load_cart_data();

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

                html : true,

                container: 'body',

                content:function(){                  

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

                }

          });

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

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

          });

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

                formname = $('.popover-content').find('#namef').val();                

          });

          $(document).on('focusout', '#emailf', function(){                

                formemail = $('.popover-content').find('#emailf').val();

          });

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

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

                  var nameval = $("input#namef").val();

                  alert("Scart value is "+scart_add);

                  alert("Name is "+formname);            

                  alert("Email is "+formemail); 

          });

});