Javascript 更换的按钮不起作用

我有这个html表单

   <form action="" method="post" name="login_form">
     Email :  <input type="text" id="email2" name="email" /><br />
     <span id="passwordT" >Password : </span> 
     <input type="password" name="password" id="password2"/><br />
     <input type="button" id="submit_botton" value="Login" />
     <div><input id="forgot" type="button" value="Forgot your Password?" /></div>
  </form>

电子邮件：

密码：

还有这里的javascript

var forgot = $('#forgot');
var forgot2 = $('#forgot2');
forgot.click(function() {
   $('#password2').hide();
   $('span#passwordT').hide();
   $('input#submit_botton').prop('value', 'Reset Passowrd'); 
   $('input#forgot').replaceWith('<input id="forgot2" type="button" value="Login here" />');
});
$('input#forgot2').click(function() {        // this function didnt want to work
      $('input#forgot2').prop('value', 'Forgot your Password?');  
      $('#password2').show();
      $('span#passwordT').show();
      $('input#submit_botton').prop('value', 'Login'); 
 });

var遗忘=$（“#遗忘”）；
var forgot2=$（“#forgot2”）；
忘记。单击（函数（）{
$（'#password2'）.hide（）；
$（'span#passwordT'）.hide（）；
$（'input#submit_botton'）.prop（'value'，'Reset Passowrd'）；
$（'input#遗忘'）。替换为（''；
});
$（'input#forgot2'）。单击（函数（）{//此函数不想工作
$（'input#forgot2'）.prop（'value'，'忘记密码？'）；
$（'#password2'）.show（）；
$（'span#passwordT'）.show（）；
$（'input#submit_botton'）.prop（'value'，'Login'）；
});

我想要的是： 当我点击第二个功能时，我将返回第一次使用的按钮

我尝试在第一个函数中创建第二个函数，但得到的结果是该函数可以工作，但只有一次，我的意思是，如果我再次单击以重置密码，则无法工作

---

谢谢您的帮助。

您的问题是试图将事件处理程序附加到一个尚不存在的元素。这在直接事件处理程序中是不可能的。改用委派事件

$(document).on('click','#forgot2', function(){ ... });

文档

可以替换为绑定时存在的任何

#forgot2

容器

---

作为旁注，请注意，当您使用id选择器（例如

#forgot2

）时，无需添加任何其他内容，因为id仅标识一个元素（不允许重复id）。因此，这个选择器

输入#forgot2

没有错误，但比必要的更复杂。

这样做的原因很简单。click（）将click事件应用于静态元素集。不会向该集合添加任何新元素。将委托与.on（）一起使用将在创建新的匹配元素时应用于这些元素。您的代码只工作一次，我的意思是，如果我再次单击“忘记密码”将无法工作是的：）谢谢，我还必须将此更改为第一个函数-$（文档）。在（'click'，'#忘记'，函数（）{