MVC에서 JS 부분 뷰를 사용합니다.

Question

내 메인보기 내부에 저는 Ajax 액션 링크가 있습니다.

예 : 보기를 클릭

부분보기 "UpdateCompanyHours.cshtml은"내가 여기

@model CompanyHoursVM 
@{Layout = null; } 
@using (Ajax.BeginForm("CompanyHours", new AjaxOptions { UpdateTargetId = "presult", HttpMethod = "POST", InsertionMode = InsertionMode.Replace })) 
{  
    @Html.ValidationSummary(true) 
    @Html.AntiForgeryToken() 

    // i have textboxes and a button - everything loads fine 
    @Html.CheckBoxFor(model => model.Open247, new { @class = "Time24hrs"}) 
} 

가에로드되는

public ActionResult CompanyHours(string Id) 
    { ... return PartialView("UpdateCompanyHours", model);} 

컨트롤러 내부

@Ajax.ActionLink("Update Hours", "companyhours", "business", 
new { Id = ViewBag.Id }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "divCurrentView" }) 

이 문제입니다 :

내 기본보기 내에 js 파일을 추가하려고합니다. 기본보기 페이지 하단에 코드를 추가

@section Scripts 
{ 
    <script src="~/Scripts/myjs.js"></script> 
} 

심지어 @section 스크립트없이

은 매우 간단 파일

JS 태그. 첫 번째 경고가 실행되지만 onclick하지 않습니다.

(function() { 
$(function() { 
    alert("alert1"); 
    $('.Time24hrs').click(function() { 
     alert("alert2"); 
    }); 
}); 
})(); 

js가 인식되지 않습니다. 하지만 부분보기 안에 js 파일을 추가하면 제대로 작동합니다.

기본보기에서 js 파일을로드하고 부분보기에서 js 파일을 사용하려면 어떻게해야합니까?

Answer 1

"업데이트 시간"링크를 클릭하면 아약스 코드가 현재 DOM (부분보기의 마크 업)에 새로운 DOM 요소를 동적으로 주입합니다. 그러나 클릭 이벤트는 기존 요소 (페이지가로드 될 때 현재 요소)에 등록되었습니다. 이 새로운 DOM 요소에 대해 등록 된 클릭 이벤트 핸들러는 없습니다.

jQuery on 메서드를 사용하여 click 이벤트를 바인딩합니다. on 메서드를 사용하면 에 대한 이벤트를 등록 할 수 있습니다. DOM

이렇게하면됩니다.

$(function() { 

    $(document).on("click",".Time24hrs",function() { 
     alert("alert2"); 
    }); 

}); 

Answer 2

기본 페이지의로드 기능이 호출 된 후 비동기 적으로 완료 할 수있는 부분을 반환하는 Ajax 호출을 사용하면 해당 요소가 아직 추가되지 않은 상태에서 이벤트 처리기를 설정할 기회가 없습니다. 돔. 당신은 당신의 부분이로드 될 때 어떻게 든 알릴 필요가있다.