javascript - jQuery 嵌套函数变量作用域

Question

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

我在嵌套函数之外将值提取到控制台日志中做错了什么？

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

当我转到控制台登录 Chrome 以获取字段的 focusout 事件时，它们会显示值，但是当尝试使用结账按钮时，我无法在嵌套函数外部的结账点击中传递数据，即使使用一个全局变量。

--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>

                  <div id="navbar-cart" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                      <li>
                        <a id="cart-popover" class="btn" data-placement="bottom" title="Shopping Cart">
                          <span class="glyphicon glyphicon-shopping-cart-2x"></span>
                          <span class="badge"></span>
                          <span class="total_price">$ 0.00</span>
                        </a>
                      </li>
                    </ul>
                  </div>                  
                </div>
              </nav>    
<div id="popover_content_wrapper" style="display: none">
              <span id="cart_details"></span>
              <div>
                <form method="POST">
                  Name:&nbsp;<input type="text" id="namef" >&nbsp;&nbsp;
                  Email:&nbsp;<input type="text" id="emailf" >&nbsp;&nbsp;
                  <input type="hidden" name="scart_add" value="1" /><br><br>
</div>
<div align="right">                  
               <button type="button" class="btn btn-primary" id="check_out_cart">
                  <span class="glyphicon glyphicon-shopping-cart"></span> Check out
                  </button>
                  <button type="button" class="btn btn-default" id="clear_cart">
                  <span class="glyphicon glyphicon-trash"></span> Clear
                  </button>                
</div>
</form>            
</div>
</div>
<div id="display_item">
</div>
...
</div>

我希望输入#namef 文本中的值出现在 console.log ...formname 变量中，但它只显示为“”。

Answer 1

在您单击按钮之前，focusout 的事件不会添加到input:另外，我不知道你是不是这样复制和粘贴你的 HTML 和 Javascript 的，但是当我把它放入 fiddle 时它会抛出错误。

如 Rory 指出的那样，将它移到按钮单击处理程序之外:

var formname;
$(document).ready(function() {
        //Now focusout handler is added on DOM Ready instead of when you click the button
        $('input#namef').on('focusout', function(){                  
               formname= $('input#namef').val();                         
               console.log(formname);
         });

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

            var scart_add = $("input[name='scart_add']").val();
            console.log("Scart value is "+scart_add);
            console.log("Name is "+formname);

         });
});

这是一个有效的 fiddle :https://jsfiddle.net/hqgv7zsa/