javascript - 从 jquery 弹出模式调用 Action 方法

Question

好吧，在发布此内容之前我已经进行了很多搜索，但我无法真正得到我需要的东西，问题是我有一个用于登录/注册的弹出模式

 <!--Signin/Signup container-->
        <div id="modal" class="popupContainer" style="display:none;">


            <section class="popupBody">
                <!-- Social Login -->
                <div class="social_login">
                    <div class="">
                        <a href="#" class="social_box fb">
                            <span class="icon"><i class="fa fa-facebook"></i></span>
                            <span class="icon_title">سجل عن طريق الفيس بوك</span>

                        </a>

                        <a href="#" class="social_box google">
                            <span class="icon"><i class="fa fa-google-plus"></i></span>
                            <span class="icon_title">سجل عن طريق كوكل</span>
                        </a>
                    </div>

                    <div class="centeredText">
                        <span>أو استخدم الايميل الخاص بك</span>
                    </div>

                    <div class="action_btns">
                        <div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
                        <div class="one_half last"><a href="#" id="register_form" class="btn"> Register</a></div>
                    </div>
                </div>

                <!-- Username & Password Login form -->
                <div class="user_login">
                    <form>
                        <label>الايميل / اسم المستخدم</label>
                        <input type="text" />
                        <br />

                        <label>كلمة السر</label>
                        <input type="password" />
                        <br />

                        <div class="checkbox">
                            <input id="remember" type="checkbox" />
                            <label for="remember">احفظ معلومات الدخول على هذا الجهاز</label>
                        </div>

                        <div class="action_btns">
                            <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> رجوع</a></div>
                            <div class="one_half last"><a href="#" class="btn btn_red">Login</a></div>
                        </div>
                    </form>

                    <a href="#" class="forgot_password">هل نسيت كلمة المرور؟</a>
                </div>

                <!-- Register Form -->
                <div class="user_register">
                    <form>
                        <label>الاسم الكامل</label>
                        <input type="text" />
                        <br />

                        <label>عنوان البريد الألكتروني</label>
                        <input type="email" />
                        <br />

                        <label>كلمة المرور</label>
                        <input type="password" />
                        <br />

                        <div class="checkbox">
                            <input id="send_updates" type="checkbox" />
                            <label for="send_updates">أرسل لي رسائل في حال وجود أي تحديثات</label>
                        </div>

                        <div class="action_btns">
                            <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
                            <div class="one_half last"><a href="#" class="btn btn_red">Register</a></div>
                        </div>
                    </form>
                </div>
            </section>
        </div>
        <!--Signin/Signup End-->

这是脚本:

  <script>
            // Plugin options and our code
            $("#modal_trigger").leanModal({
                top: 100,
                overlay: 0.6,
                closeButton: ".modal_close"
            });
            $(function () {
                // Calling Login Form
                $("#login_form").click(function () {
                    $(".social_login").hide();
                    $(".user_login").show();
                    return false;
                });

                // Calling Register Form
                $("#register_form").click(function () {
                    $(".social_login").hide();
                    $(".user_register").show();
                    $(".header_title").text('Register');
                    return false;
                });

                // Going back to Social Forms
                $(".back_btn").click(function () {
                    $(".user_login").hide();
                    $(".user_register").hide();
                    $(".social_login").show();
                    $(".header_title").text('Login');
                    return false;
                });
            });
            /*--------------------------------*/
        </script>
    </div>

现在我需要创建一个操作方法，以便当用户单击“注册”或“登录”时调用它来执行必要的操作我怎样才能做到这一点。我对 jquery 和 javascript 的了解有点有限我将不胜感激任何帮助。预先感谢您

Answer 1

将 id 附加到您的按钮:

<div id = "login_button" class="one_half last"><a href="#" class="btn btn_red">Login</a></div>

然后为它们附加一个事件监听器:

$("#login_button").click(function() {
   // Do something
});

“注册”按钮也是如此。