Question

我有一点弹出有时包含链接，其他时候包含一个表单。

我已经设置了链接，但是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}

标签来自Expression Engine。

有谁知道如何排序？

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

请勿使用您问题中的第二个功能，因为li#account-options中的任何点击都会返回false，这样就无法提交您的表单。

Answer 2

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

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

Live test case

由于返回false或stopPropagation而不提交表单

2 个答案: