轉換的<a href=...> to a button onclick

Question

I'm following along with a jquery tutorial that gets initialized with a standard href text link. I have everything working. As the final step, I want to remove the text link and replace it with a button using its click event. Here is my code as it exists right now:

//this is the line that I want to replace with a button  
<a href="#login-box" class="login-window">Log In</a> 

// notice how that previous line somehow invokes this next section. 
// this is the part that I don't understand how to do with a button 
<div id="login-box" class="login-popup"> 
    <a href="#" class="close"> 
     <img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /> 
    </a> 

    <form method="post" class="signin" action="#"> 
     <fieldset class='textbox'> 
      <label class="username"> 
       <span>Username:</span> 
       <input id="username" name="username" value="" type="text" autocomplete="on" placeholder="Username"> 
      </label> 
      <label class="password"> 
       <span>Password</span> 
       <input id="password" name="password" value="" type="password" placeholder="Password"> 
      </label> 

      <button class="submit button" type="button">Sign in</button> 
      <p><a class="forgot" href="#">Forgot your password?</a></p>   
     </fieldset>  
    </form> 
</div> 

So, I set up a very simple button, but I have no idea what to put in the onclick event handler. If this were a simple URL link, no problem. I would just write a jquery function (or even just a js function). But in the context of this code, I have no idea how to invoke it.

<div id='login'> 
    <button id='login-form' onclick="???"></button> 
</div> 

I'm a little out of my depth with this one. Can someone point me in the right direction? Thanks!

EDIT: There seems to be some confusion with what I am trying to accomplish, so let me explain. In the existing code, the href on the first line somehow invokes the code contained in the div with the id="login-box" on the next line. I want to achieve the same effect, just with a button instead of a text-based href. Unfortunately, I have never seen code written this way. It works correctly with the href, but I would prefer a button for aesthetic purposes.

I tried this, but there is no response, other than from the console:

$('#login-form').on('click',function(){ 
    console.log("here"); 
    location.href='#login-box'; 
}); 

Let me be clear: I know how to write a button that takes a user to a new web page. This is not taking a user to a new web page. It's a callback to the same html code invoking a different section of it. That's why it is confusing.

Answer 1

我想通了後，終於找到這個question

做到這一點的方法是這樣的：

$('#login-form').on('click',function(){ 
    $("#login-box").show(); 
}); 

Answer 2

If you want to open a link on button click then try,

<button id='login-form'>Button</button> 

Code would be,

$('#login-form').on('click',function(){ 
    location.href='your url goes here'; 
}); 

And if you want it to open in a new target then try,

$('#login-form').on('click',function(){ 
    window.open('your url goes here', '_blank'); 
}); 

Live Demo

Answer 3

嘗試這樣jQuery中：

$('#login-form').on('click', function(event)) { 
    event.preventDefault(); 
    $(this).parent().append("<button id="replace">Your code for replace this element</button>"); 
    $(this).remove(); 
} 

如果你想atach新的HTML元素添加一個事件，你可以這樣做：

$('#login-form').on('click', 'replace', function(event) {}); 

如果這響應不好，你可以更多地解釋你真正想做的事情（我想刪除文本鏈接 - >文本鏈接的ID，並添加按鈕...）。

如果你想發送表單，當你點擊某個元素時。

$('#somelement').on('click', function(event) { 
    event.preventDefault(); 
    $("form").first().submit(); 
}):