首页 > js闭包问题

js闭包问题

今天遇到一个问题,点击每个div里面的按钮,会弹出一个表单,在表单的提交回调里面获取该div里面的一个隐藏域的值,只有第一次的值是对的,以后每次点击都是第一次的值。我知道问题应该是出在闭包上了,但是不知道如何解决,实际问题比这个复杂多了,所以不方便在提交回调里去获取隐藏域的值,求各路大神支招

<!doctype html>
<html>
    <head>
        <meta charset = "utf-8">
        <script src="jquery.js"></script>
        <script src="jquery.validate.js"></script>
        <script src="template.js"></script>
        <style>
            div{ margin: 100px;}
            form{ display: none;}
        </style>
    </head>
    <body>
        <div>
            <input type="hidden" name="" value= "1">
            <input type="button" class="btn" value="click">
        </div>
         <div>
            <input type="hidden" name="" value= "2">
            <input type="button" class="btn" value="click">

        </div>
        <div>
            <input type="hidden" name="" value= "3">
            <input type="button" class="btn" value="click">
        </div>
        <form action="" id="myForm">
            <input type="text" name="username">
            <input type="text" name="email">
            <input type="submit" value="ok">
        </form>


<script>
    
    var aDiv = $("div");
    var oForm = $("#myForm");
    
    aDiv.each(function (){
        var self = $(this);
        
        var oBtn = self.find(".btn");
        oBtn.click(function (){
            var id = $(this).prev().val();
            console.log(id);
            oForm.show().validate({
                debug: true,
                submitHandler: function (form) {
                    console.log(id); // 第二次以后点击都是第一个的值
                    oForm.hide().get(0).reset();
                }
            });
        });
        
    });
    
</script>


    </body>
</html>


这个是 jquery.validator.js 源代码。

首先 这个 validator 会绑定到这个 form 上,并且 validator 只会被初始化一次从而形成闭包同时引用第一次点击得到的id的值。

看到第30-33行,第一次点击按钮时 validator 还没有被初始化,所以会执行到38行,这里的options 就是我们传入的点击的按钮所在的 div 里面的 hidden 的值。


似乎没有看到你在那个地方修改隐藏域中input的值啊,那为啥会改变呢?


哎,没想通是哪里的问题,但是解决了,醉了

<script> 
    var aDiv = $("div");
    var oForm = $("#myForm");
    var id;   //注意这里 我改的是这里

    aDiv.each(function (){
        var self = $(this);
        console.log(this);

        var oBtn = self.find(".btn");
        oBtn.click(function (){
            id = $(this).prev().val();  //注意这里我改的是这里
            console.log(id);
            oForm.show().validate({
                debug: true,
                submitHandler: function (form) {
                    console.log(id);
                    oForm.hide().get(0).reset();
                }
            });
        });    
    });  
</script>

你试下是不是想要的效果吧

【热门文章】
【热门文章】