未加星标

Input click not working

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

I have a form on my page when I click on a button the form hides and another form shows in. Here I call jQuery's show() and hide() buttons and change the button's value and id attribute. Then using the buttons new id attribute I use click() function on it. But unfortunately it does not work.

Here is the fiddle .

HTML: <form id="sign_in"> <table style="margin: 0 auto;"> <tr> <td align="center"> <span style="font-weight: bold;font-size: 2em;">Sign In</span> </td> <tr> <td> <input class="input" type="email" placeholder="Username" name="username" /> </td> </tr> <tr> <td> <input class="input" type="password" placeholder="Password" name="password" /> <br /> </td> </tr> <tr align="right"> <td> <input class="btn" type="submit" value="Sign In"> </td> </tr> </table> </form> <form id="sign_up"> <table style="margin: 0 auto;"> <tr> <td align="center"> <span style="font-weight: bold;font-size: 2em;">Sign Up</span> </td> <tr> <td> <input class="input" type="email" placeholder="Username" name="username" /> </td> </tr> <tr> <td> <input class="input" type="password" placeholder="Password" name="password" /> <br /> </td> </tr> <tr align="right"> <td> <input class="btn" type="submit" value="Sign In"> </td> </tr> </table> </form> <br/> <input id="sign_up_btn" class="btn" type="submit" style=" font-weight:bold; height:40px; width: 292px;" value="Create An Account"></input> JS: $(document).ready(function () { $("#sign_up_btn").click(function () { $("#sign_in").hide("slow"); $("#sign_up").show("slow"); $(this).attr("value", "Already have an account?"); $(this).attr("id", "sign_in_btn"); }); $("#sign_in_btn").click(function (e) { e.stopPropagation(); $("#sign_up").hide("slow"); $("#sign_in").show("slow"); $(this).attr("value", "Create An Account"); $(this).attr("id", "sign_up_btn"); }); });

Problem courtesy of: Mohammad Areeb Siddiqui

Solution

You need to use event delegation as #sign_in_btn doesn't exist when you bind click event

$(document.body).on('click',"#sign_in_btn",function (e) { e.stopPropagation(); $("#sign_up").hide("slow"); $("#sign_in").show("slow"); $(this).attr("value", "Create An Account"); $(this).attr("id", "sign_up_btn"); });

Solution courtesy of: Mohammad Adil

Discussion $(document).ready(function () { $(document).on('click', "#sign_up_btn",function () { $("#sign_in").hide("slow"); $("#sign_up").show("slow"); $(this).attr("value", "Already have an account?"); $(this).attr("id", "sign_in_btn"); }); $(document).on('click', "#sign_in_btn", function (e) { e.stopPropagation(); $("#sign_up").hide("slow"); $("#sign_in").show("slow"); $(this).attr("value", "Create An Account"); $(this).attr("id", "sign_up_btn"); }); });

Discussion courtesy of: Ali Poder

Use toggle()

$(document).ready(function () { $("#sign_up_btn").click(function () { $("#sign_in, #sign_up").toggle("slow"); $(this).val(function(_, val) { return val == 'Create An Account' ? 'Already have an account?' : 'Create An Account'; }); }); });

FIDDLE

Discussion courtesy of: adeneo

This recipe can be found in it's original form on Stack Over Flow .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:Input click not working
本站链接:https://www.codesec.net/view/611503.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(73)