MVC5 C# 및 면도칼로 부분보기에서 javascript 실행

Question

면도날 엔진을 사용하여 MVC5 및 C#에 작은 웹 앱이 있습니다. 내 코드에는 몇 가지 버튼이있는 테이블의 인덱스 인 기본보기가 있습니다. 버튼 중 하나를 클릭하면 부트 스트랩 모달이 나타납니다.

지금까지는 좋았지 만 문제는 모달의 버튼을 클릭 할 때 특정 동작을 수행하려고하지만 아무 일도 일어나지 않는다는 것입니다.

<div id="editModal"></div> 
    <a class="btn btn-default editPackage"t itle="Edit Package"><i class="icon-edit"></i></a> 
    <h1>Package List</h1> 

    <table class="table" id="packagesTable"> 
     <!-- Big ass table here :D --> 
    </table> 

이 내가 jQuery를 사용하여 모달 표시 방법은 다음과 같습니다 :

이 메인이다

//Show Edit Package modal 
    $(".btn.btn-default.editPackage").click(function() { 

     $.ajax({ 
      url: $(this).data('url'), 
      type: 'GET', 
      cache: false, 
      success: function (result) { 
       $('#editModal').html(result).find('.modal').modal({ 
        show: true 
       }); 
      } 
     }); 
     return false; //prevent browser defualt behavior 
    }); 

지금까지 너무 좋아. 모든 것이 잘 작동합니다. 문제는

이

는 모달입니다 ... 모달와 함께 제공 :

<div class="modal fade in" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"> 
    <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <h4 class="modal-title" id="myModalLabel">Edit Package MyPackage</h4> 
     </div> 
     <div class="modal-body"> 
      <form class="form-horizontal"> 
      <div class="control-group"> 
       <label class="control-label">Package Name:</label> 
       <div class="controls"> 
       <input type="text" class="form-control" id="package-name" placeholder="MyPackageName"> 
       </div> 
      </div> 
      <!-- Other fields here --> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="button" class="btn btn-primary" id="savePackageChangesBtn">Save changes</button> 
     </div> 
     </div> 
    </div> 
    </div> 

이것은 모달의 단추를 클릭 할 때 실행하고자하는 TEH 자바 스크립트 :

$(document).ready(function() { 
    $("#savePackageChangesBtn").click(function() { 
    $('.modal').modal({ 
     show: true 
    }); 
    return false; //prevent browser defualt behavior 
    }); 
}); 

메인보기는 "Index.cshtml"이라는 파일에 있습니다. 모달 뷰는 "_EditModal.cshtml"이라는 파일입니다 (부분 뷰이기 때문에). javascript 코드는 "custom.js"라는 파일로 기본보기에서 사용되며 완벽하게 실행됩니다.

왜 작동하지 않습니까?

Answer 1

귀하의 모달은 동적으로 추가되지만 귀하의 $("#savePackageChangesBtn").click(function()은 DOM 준비 시간에 등록됩니다 (대상 요소가 바인드 할 수 없을 때).

당신이 클릭 핸들러 전에 alert($("#savePackageChangesBtn").length);를 추가 한 경우는 0

가 아닌 변화 조상 요소에 부착 된 위임 된 이벤트 처리기를 사용하여 반환합니다.

이 비 변화 조상에 거품까지 이벤트를 수신하여 작동

$(document).on('click', "#savePackageChangesBtn", function() 

후 이벤트 시간하지 이벤트 등록 시간에 jQuery를 선택 을 적용합니다. 즉, 클릭이 발생할 때 요소가 존재해야합니다.

당신은 일반적으로 그렇게 아마 대신 문서의 #editModal를 사용, 가까운로드 된 내용에 대한 변하지 않는 요소를 선택할 것

예를 들어,

$('#editModal').on('click', "#savePackageChangesBtn", function() 

참고 : 아무 것도 편리 없지만,이 버블 마우스 이벤트에 응답하지 발생할 수 있습니다 스타일로 'body'를 사용하지 않는 경우 document가 가장 기본입니다 (예를 들어, body의 계산 된 높이가 0 인 경우).

Answer 2

어느 쪽이든 당신은 모달

예를 들어, 표시 후 $("#savePackageChangesBtn").click(function() {}); 코드를 추가

//Show Edit Package modal 
$(".btn.btn-default.editPackage").click(function() { 

    $.ajax({ 
     url: $(this).data('url'), 
     type: 'GET', 
     cache: false, 
     success: function (result) { 
      $('#editModal').html(result).find('.modal').modal({ 
       show: true 
      }); 
      $("#savePackageChangesBtn").click(function() { 
       $('.modal').modal({ 
        show: true 
       }); 
       return false; //prevent browser defualt behavior 
      }); 
     } 
    }); 
    return false; //prevent browser defualt behavior 
}); 

또는 당신의 document.ready

$(document).on("click", "#savePackageChangesBtn", doSomething); 

이 초기화 이후에 생성 된 요소 듣고 문서를 만들어에 다음을 추가합니다.

그리고 doSomething에서 원하는 것을 추가하십시오.