preventDefault和添加/刪除類不起作用

對不起，我已檢查所有其他preventDefault的問題，但他們都沒有提供給我我正在尋找的答案。preventDefault和添加/刪除類不起作用

這裏是我有（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當點擊頁面跳轉至頁面頂部和類不會被刪除 - 代碼的這部分似乎不起作用。

我在這裏錯過了什麼..？

UPDATE：

我離開了我的代碼，我覺得現在是導致該問題的一部分。的內容.bookings如下加載：

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

但我不會認爲這將會對關閉按鈕的效果......？

來源

2014-01-15 Mr Jonny Wood

你試過用'swiss.addClass（'show'）'而不是'toggleClass'嗎？ –

刪除了我以前的評論，這是誤解的結果。當我將代碼放入jsfiddle時，我無法重複出現錯誤。（http://jsfiddle.net/WVTxN/3/）你可以發佈整個頁面的代碼嗎？ –

哎呦。它應該讀取'addClass' - 編輯原始文章 –

你有嘗試翻轉e.preventDefault（）和swiss.removeClass（）嗎？

另外，如果它跳到頁面的頂部，那麼看起來preventDefault（）正在做你想做的事情。將其替換爲返回false。

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

您是否在控制檯上顯示任何錯誤？將是我的下一個問題給你。

來源

2014-01-15 01:03:06 Dawson

在控制檯沒有錯誤，這真的沒有幫助。我會嘗試返回false，但我以前嘗試過（使用preventDefault）。我會嘗試它自己的 –

所以我得到了這個工作，但我不得不添加額外的標記:(

如果任何人都可以解決，而不額外的標記原來的問題我很渴望知道怎麼辦。

解決方案

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

來源

2014-01-15 10:06:22

preventDefault和添加/刪除類不起作用

回答

相關問題