亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

jQuery 嵌套函數變量范圍

jQuery 嵌套函數變量范圍

catspeake 2021-10-07 20:14:29
即使我相信我使用的是全局變量,我也無法在按鈕的單擊事件函數內的嵌套函數之外填充嵌套變量值。將值拉入嵌套函數外部的控制臺日志中我做錯了什么?我正在使用帶有 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 變量中,但它只顯示為“”。
查看完整描述

3 回答

?
隔江千里

TA貢獻1906條經驗 獲得超10個贊

這在某種程度上是一種競爭條件。


在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 處理程序的范圍內。


查看完整回答
反對 回復 2021-10-07
?
慕桂英3389331

TA貢獻2036條經驗 獲得超8個贊

使用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); 


          });

});



查看完整回答
反對 回復 2021-10-07
  • 3 回答
  • 0 關注
  • 179 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號