preventDefault 및 add/removeClass가 작동하지 않음

Question

불쌍한 제목에 대해 유감스럽게 생각합니다. 다른 모든 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> 

클래스 show이 .icon-close 클릭 할 때 그러나 페이지가 점프, .bookings에 추가됩니다 .button-book을 클릭 페이지 상단과 클래스가 제거되지 않습니다. 코드의이 부분은 제대로 작동하지 않습니다.

여기에 뭔가 빠졌습니까?

업데이트 :

나는 지금 문제를 일으키는 생각 내 코드의 부분을 떠났다. 다음과 같이 .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()가 원하는 것을 수행하고있는 것으로 보입니다. 이것을 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'); 
    });