Question

我有这个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'); 
 });

HERE JS-DEMO

我想要的是：当我点击第二个功能时，我会在第一时间取回按钮。

我尝试在第一个内部制作第二个功能，但我得到的是功能有效，但只有一次，我的意思是如果我再次点击重置密码将无效。

感谢您的帮助。

Answer 1

您的问题是您正在尝试将事件处理程序附加到尚不存在的元素。使用直接事件处理程序是不可能的。改为使用委托事件。

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

document可以替换为绑定时存在的任何#forgot2容器。

作为旁注，请注意当您按id使用选择器时（例如#forgot2），不需要添加任何其他内容，因为id标识一个且只有一个元素（不允许重复的ID）。所以这个选择器input#forgot2没错，但比必要的更复杂。

取代按钮不会工作

1 个答案: