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');
});

Live Demo

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) {});

如果此回复不合适，您可以解释更多您真正想要做的事情（我想删除文本链接 - ＆gt;文本链接的ID，并添加按钮......）。

如果要发送表单，请单击某个元素。

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

Answer 3

我终于找到了这个question

后想出来了

这样做的方法是：

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

转换<a href="..."> to a button onclick</a>

3 个答案: