1

我有一个小弹出窗口，有时包含链接，有时包含表单。

我已经设置并为链接工作，但 jQuery 正在停止表单提交。

我想不出一种方法来允许表单提交同时仍然停止链接触发。

jQuery：

$('#account').on('click', function() {
    $('#account-options').fadeIn('slow'); 
    $(document).one('click', function() { 
        $("#account-options").fadeOut('slow'); 
    });
    return false;
});

$("#account-options").on('click', function() { 
    return false; 
}); 

$('#account-options a').on('click', function(e) {
   e.stopPropagation(); 
});

HTML：

{if logged_out}
<li id="account"><a href="/login">Log In</a>
    {exp:member:login_form return="/"}
    <ul id="account-options" class="login">
        <li id="arrow"></li>
        <li>
            <label>Username</label>
            <input type="text" name="username" value="" maxlength="32" size="25">
        </li>
        <li>
            <label>Password</label>
            <input type="password" name="password" value="" maxlength="32" size="25">                                   
        </li>
        <li>
            <input type="submit" name="submit" value="Log In">
        </li>
    </ul>
    {/exp:member:login_form}
</li>
{if:else}
<li id="account"><a href="/account">Your Account</a>
    <ul id="account-options">
        <li id="arrow"></li>
        <li><a href="">Edit Details</a></li>
        <li><a href="">Add Submission</a></li>
        <li><a href="{path='logout'}">Log Out</a></li>
    </ul>
</li>
{/if}

标签来自表达式引擎。

有谁知道如何排序？

4

2 回答 2

1

要停止 中所有链接的默认行为li#account，请使用以下命令：

$('#account').find('a').on('click', function(e) {
    e.preventDefault(); // stops links from being followed
});

然后，要切换帐户选项的淡入（点击a[href="/login"]）和淡出（点击 外部li#account），请使用以下命令：

$('#account').find('[href="/login"]').on('click', function() {
    // do the DOM lookup just once and cache it, for better performance
    $('#account-options').fadeIn('slow');
});
$(document).on('click', function(e) {
    var target = $(e.target);console.log(target);
    if (target !== $('#account') && target.closest('#account').length < 1) {
        $('#account-options').fadeOut('slow');
    }
});

不要使用您问题中的第二个函数，因为它所做的只是为任何 click in 返回 false li#account-options，这就是阻止您提交表单的原因。

于 2013-05-22T11:56:50.990 回答
0

您可以检查作为传递事件对象一部分的目标元素：

$("#account-options").on('click', function(event) { 
    if (event.target.nodeName.toLowerCase() === "a") {
        //anchor, cancel:
        return false; 
    }

    //user clicked something else, probably a submit button. Let it go trough.
});

现场测试用例。

于 2013-05-22T11:56:23.677 回答