Question

对于糟糕的头衔很抱歉，我已经检查了所有其他的防止默认问题，但没有人提供我正在寻找的答案。

这是我的（jQuery）：

    var swiss = $('#post-88 .bookings');

    $("#post-88 .button-book").click(function(e) {
        e.preventDefault();
        swiss.addClass('show');
    });
    $("#post-88 .icon-close").click(function(e) {
        e.preventDefault();
        swiss.removeClass('show');
    });

＆安培; HTML：

<article id="post-88" class="bg col span-1-3" role="article">
    <div class="feat-still overlap">
        <img width="481" height="330" src="http://domain.com/imgs/img.jpg">
    </div>
    <div class="bookings overlay show">

        <form>
            <!-- form stuff here -->
            <a class="icon-close" href="#">Cancel</a>
        </form>
    </div>

    <a class="button-book" href="#" title="Make a reservation">Make a reservation</a>

</article>

点击.button-book时，课程show会被添加到.bookings，但是当点击.icon-close时，页面会跳转到页面顶部并且课程无法获得删除 - 这部分代码似乎不起作用。

我在这里错过了什么......？

更新

我遗漏了部分代码，我现在认为这会导致问题。 .bookings的内容加载如下：

var root = location.protocol + '//' + location.host;
var swiss = $('#post-88 .bookings');
swiss.load(root+'/wp-content/themes/PL14-Base/inc/bookings-swiss.php');

但我不会想到这会对关闭按钮产生影响......？

Answer 1

您是否尝试过翻转e.preventDefault（）和swiss.removeClass（）？

此外，如果它跳到页面顶部，看起来preventDefault（）正在做你想要的。将其替换为return false。

$("#post-88 .icon-close").click(function(e) {
    swiss.removeClass('show');
    return false;
});

您是否在控制台中显示任何错误？这将是我的下一个问题。

Answer 2

所以我得到了这个，但我不得不添加额外的标记:(

如果有人可以在没有额外标记的情况下解决原始问题，我会非常想知道如何。

<强>解决方案

HTML：

<article id="post-88" class="bg col span-1-3" role="article">

    <div class="feat-still overlap">
        <img width="481" height="330" src="http://domain.com/imgs/img.jpg">
    </div>
    <div class="bookings overlay">
        <div class="load-form"></div>
        <a class="icon-close" href="#">Cancel</a>
    </div>

    <a class="button-book" href="#" title="Make a reservation">Make a reservation</a>

</article>

jQuery的：

    var root = location.protocol + '//' + location.host;
    var swissContainer = $('#post-88 .bookings');
    var swissForm = $('#post-88 .bookings .load-form');
    var swissClose = $('#post-88 .bookings .icon-close');
    swissForm.load(root+'/wp-content/themes/PL14-Base/inc/bookings-swiss.php');  

    $("#post-88 .button-book").click(function(e) {
        e.preventDefault();
        swissContainer.addClass('show');
    });
    swissClose.click(function(e) {
        e.preventDefault();
        swissContainer.removeClass('show');
    });

preventDefault和add / removeClass不起作用

2 个答案: