.load를 사용하여 .load를 사용하여 navbar에서 페이지를로드합니다.

Question

저는 부트 스트랩의 모달을 사용하고 있습니다. jquery의 .load를 사용하여 클릭 할 때 모달보기를 변경하는 탐색 막대를 사용하고 싶습니다. 표시 할 기본보기로 모달을 가져올 수 있지만 클릭 할 때 나머지 단추를 실행할 수는 없습니다. 아래의 ID는 내가 원하는 것을 간소화 한 것입니다. 어떤 도움을 주셔서 감사합니다. 이벤트 바인딩이 더 이상 존재하지 않는 요소에 부착 될 수 있기 때문에

<div class="modal-header"> 
    <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>X</button> 
    <h3 id="myModalLabel">Account Settings</h3> 
</div> 
<div class="modal-body"> 
    <div class="btn-group"> 
     <button id="account" class="btn">Account</button> 
     <button id="edit-account-users" class="btn">Users</button> 
    </div> 
    <div class="wrapper"> 
    <!-- Content --> 
    </div> 
</div> 
<div class="modal-footer"> 
    <button class="btn" data-dismiss='modal' aria-hidden='true'>Close</button> 
</div> 


$(document).ready(function() { 
    accountData.init(); 
}); 

var accountData = { 
    'init' : function() { 
     $('.account-settings, #account-settings #account').click(function() { 
      $('#account-settings').load('/partials/account/index.html', function() { 
      $('#account-settings .wrapper').load('/partials/account/account_data.html'); 
     }); 
    }); 

    $('#edit-account-users').click(function() { 
     $('#account-info .wrapper').load('/partials/account/account_users.html'); 
    }); 
} 

}; 

Answer 1

당신의 버튼에 불이하지 않은 이유입니다.

.load()을 사용하여 콘텐츠를 바꿀 경우 요소에 대한 원래 이벤트 처리기가 손실됩니다. 이것이 바로 이벤트 위임이 개별 요소 대신 문서에 바인딩되는 매우 유용한 이유입니다. (document을 바꾸지 않을 것입니다.) 따라서 사용자가 페이지 내부의 내용을 클릭하면, 예를 들어 선택자에 따라 자식 요소에 및 이 위임 된으로 이벤트가 선택됩니다 (예 : document). #edit-account-users.

.click() 대신 이벤트 위임 .on()을 사용하십시오.

$(document).on('click', '#edit-account-users', function() { 
     $('#account-info .wrapper').load('/partials/account/account_users.html'); 
}); 

.on()에 대해 자세히 알아보기 : http://api.jquery.com/on/