javascript - 弹出表单不工作 Jquery

Question

我正在尝试弹出表单。当用户单击“联系我”按钮时，它将显示弹出表单，我正在尝试此代码，我知道某些语法是错误的，请帮助!

我的 HTML

 <div class="col-lg-12">
            <article>
                <h1>First Article</h1>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </article>

            <form id="form">
              <div class="form-group">
                <label>Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
              </div>
              <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
              </div>

              <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>

我的 JQUERY

 (function(){

        var object = {

            formToShow:$('#form'),

            showForm: function(){
                $(this).object.formToShow.show();
            }

        };

        $('<button class="btn btn-default">Contact Me</button>').insertAfter('article:first').on('click', object.showForm);

    })();

Answer 1

这里的问题是 $(this).object 未定义，这会导致点击处理程序中出现脚本错误。

处理程序内的

this 引用 dom 元素，而 jQuery 对象 $(this) 没有名为 object 的属性。

一种可能的解决方案是为回调方法使用自定义上下文，以便在调用时 showForm 内的 this 将引用 object实例。

$('<button class="btn btn-default">Contact Me</button>').insertAfter('article:first').on('click', object.showForm.bind(object));

<小时/>

另一种解决方案可能是直接访问闭包变量object，就像

(function () {

    var object = {

        formToShow: $('#form'),

        showForm: function () {
            object.formToShow.show();
        }

    };

    $('<button class="btn btn-default">Contact Me</button>').insertAfter('article:first').on('click', object.showForm);

})();