JQuery GET은 처음에만 작동하며, 두 번째로 서버 응답을받는 이유는 무엇입니까?

Question

나는 "바구니에 추가하기"버튼을 클릭했을 때 JQuery를 가지고 있는데 처음에는 모든 것이 예상대로 작동하지만 두번째 버튼을 클릭하면 제품이 바스켓 (데이터베이스 행 증가 된 수량을 가짐) 서버가 보낸 응답은 SUCCESS 함수의 JQuery에 의해 "캡처 된"것이 아니라 출력됩니다.

나는 왜 이것이 일어날 지 이해하지 못한다. 어떤 생각이 들까? 여기 JQuery와

$(function() { 
      $('.button').click(function(e) { 
       e.preventDefault(); 

       var url = $(this).children('a').attr('href'); 

       var elem = $(this); 
       var parent = $(this).parent().parent(); 
       var html = parent.html(); alert(html); 

       $.ajax({ 
        type: 'get', 
        url: url, 
        data: '', 
        cache: false, 
        dataType: 'text', 
        beforeSend: function(rs) { 
         parent.html('<div class="basket-item item-border" style="width:896px;text-align:center;"><p class="para"><img src="/media/images/spinner.gif" />Please wait...</p></div>'); 
        }, 
        success: function(rs) { 
         parent.html(html); 

         if(rs = 'YES') { 
          alert('Okay'); 
         } else { 
          alert('Something went wrong'); 
         } 
        }, 
        error: function(rs, err) { 
         if(rs.status == 0) { 
          alert('--- Offline'); 
         } else if(rs.status == 404) { 
          alert('404 Not Found'); 
         } else if(rs.status == 501) { 
          alert('501 Internal Error'); 
         } else if(err == 'timeout') { 
          alert('--- Timeout'); 
         } else { 
          alert('--- Unknown'); 
         } 
        } 
       }); 
      }); 
     }); 

그리고

그런 다음 "기다려주십시오 ..."메시지로 대체됩니다

<div> 
      <div class="basket-item item-border" style="width:512px;text-align:left;"> 
       <p class="para"> 

        <img 
         width="48" 
         height="48" 
         alt="Sample Soap Pack (&pound;3.99)" 
         src="http://www.mj.local/media/images/products/generic/0929005236213037.jpg" /> 
       <a href="http://www.mj.local/products/sample-soap-pack/">Sample Soap Pack</a></p> 
      </div> 

      <div class="basket-item item-border"><p>3.99</p></div> 
      <div class="basket-item item-border" style="width:256px;text-align:center;"> 
       <p class="button"><a href="http://www.mj.local/shop/add/sample-soap-pack/"> 
        <span class="add">Add to Basket</span> 

       </a></p> 
      </div> 
     </div> 

부모 DIV의 내용에 JQuery와 작동하는 HTML의 섹션입니다 예상대로 복원되었으므로 JQuery가 어떤 방식 으로든 변경됩니까? HTML을 바꿀 때 또 다른 JQuery가 제대로 작동합니다. 왜 이렇게되었습니다.

감사합니다.

Answer 1

부모의 html을 바꿔서 성공하면 귀하의 . 버튼이 대체되고 새로운 .button은 더 이상 클릭 이벤트가 바인딩되지 않기 때문입니다. > 1.7 JQuery와에 대해

$(function() { 
    $('.button').live('click', function() { 
    //your function here 
    }); 
}); 

또는 :

당신은 jQuery를 < 1.7 살 사용하여 문제를 해결할 수

$(function() { 
    $(document).on("click", ".button", function(){ }); 
}); 

Answer 2

을 당신은 AJAX 요청에 대한 콜백 함수 내부에 .button 요소를 교체 .button 요소를 클릭하면 .button 요소를 제거하면 해당 요소의 click 이벤트 처리기도 제거됩니다.

그냥 변경 :

$('.button').click(function(e) { 

사람 :

이벤트 핸들러 (Ajax 호출에 의해, 예를 들어) 나중에 추가 모든 DOM을 현재 요소들에 영향을 미칠 것이다, 그래서 나는 이벤트 위임을 사용합니다

$(document).delegate('.button', 'click', function(e) { 

여기 .delegate()에 대한 문서입니다 : http://api.jquery.com/delegate