将转换为按钮onclick

Question

下面是一个jquery教程，该教程使用标准的href文本链接进行初始化。我把一切都搞定了。作为最后一步，我想移除文本链接，并用一个使用其click事件的按钮替换它。这里是我的代码，它现在存在：

//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>

所以，我设置了一个非常简单的按钮，但是我不知道要在onclick事件处理程序中放什么。如果这是一个简单的URL链接，没有问题。我将只编写一个jquery函数（甚至只编写一个js函数）。但在这段代码的上下文中，我不知道如何调用它。

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

我对这件事有点吃不消。谁能给我指明正确的方向吗？谢谢！

编辑：我试图完成的事情似乎有些混乱，所以让我来解释一下。在现有代码中，第一行上的href以某种方式调用div中包含的代码，并在下一行使用id=“login-box”。我想达到同样的效果，只是用一个按钮，而不是一个基于文本的href。不幸的是，我从未见过这样编写的代码。它的工作与href正确，但我更喜欢一个按钮的审美目的。

我尝试了这个操作，但没有任何响应，除了从控制台：

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

让我说清楚：我知道如何编写一个按钮，把用户带到一个新的网页。这并不是将用户带到一个新的网页。它是对同一html代码的回调，调用它的不同部分。这就是为什么它是混乱的。

Answer 1

如果要在“单击”按钮上打开链接,

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

代码将是,

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

如果你想要它在一个新的目标中打开,

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

现场演示

Answer 2

在jQuery中尝试以下操作：

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

如果您想为添加的新html元素创建一个事件,可以执行以下操作：

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

如果这个响应不是ok，你可以解释更多你真正想做的事情（我想移除文本链接的文本链接->id，并添加按钮...）。

如果你想发送表单，当你点击某个元素。

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