0

私はこの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'); 
 });

JS-デモはこちら

私が欲しいのは：2番目の機能をクリックすると、最初のボタンが元に戻ります。

この 2 番目の関数を最初の関数の中に作ろうとしましたが、関数は機能しますが、一度しか機能しません。もう一度クリックしてパスワードをリセットしても機能しません。

助けてくれてありがとう。

4

1 に答える 1

8

問題は、まだ存在しない要素にイベント ハンドラーをアタッチしようとしていることです。これは、直接イベント ハンドラーでは不可能です。代わりに委任されたイベントを使用してください。

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

document#forgot2バインド時に存在する任意のコンテナーに置き換えることができます。

#forgot2補足として、ID でセレクターを使用する場合 (例: )、ID は 1 つの要素のみを識別するため、他に何も追加する必要がないことを考慮してください(ID の繰り返しは許可されません)。したがって、このセレクターinput#forgot2は間違っていませんが、必要以上に複雑です。

于 2013-06-14T15:20:08.247 に答える