輸入點擊不工作

Question

我有我的頁面上的表單，當我點擊一個按鈕的形式隱藏和另一種形式顯示。在這裏，我打電話jQuery的show()和hide()按鈕和更改按鈕的value和id屬性。然後使用新的按鈕id屬性我使用click()函數就可以了。但不幸的是它不起作用。

這是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"); 
    }); 
}); 

Answer 1

您需要使用事件代表團爲#sign_in_btn當您綁定單擊事件

$(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"); 
}); 

不存在

Answer 2

使用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

Answer 3

$(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"); 
    }); 
});