JQuery 이벤트는 ASP에서 작동하지 않습니다.NET MVC 부분 뷰

JQuery 이벤트는 ASP에서 작동하지 않습니다.NET MVC 부분 뷰

저는 ASP에서 JQuery 이벤트가 부분 뷰로 작동하도록 노력하고 있습니다.NET MVC.그러나 Ajax를 통해 부분 뷰를 로드한 후 JQuery는 부분 뷰의 요소에 대한 이벤트를 발생시킬 수 없습니다.다른 프레임워크나 자바스크립트 라이브러리를 사용하여 부분 html 코드를 Ajax로 로드하는 경우에도 이 문제가 발생할 것으로 예상됩니다.

예를 들어, 다음과 같은 예를 생각해 보십시오.

컨트롤러:

 public class TestController : Controller
    {

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult LoadPartialView()
    {
        return View("PartialView");
    }
}

Index.aspx

     <script type="text/javascript">
         $(document).ready(function() {
             $("#button").click(function() {
                 alert('button clicked');
             });
         });   
     </script>    

     <div>
     <%using(Ajax.BeginForm("LoadPartialView", new AjaxOptions { UpdateTargetId="PartialView"})){ %>
        Click <input type="submit" value="here" /> to load partial view.
     <% } %>
     </div>
     <br /><br />
     <% Html.RenderPartial("PartialView"); %>

PartialView.ascx

<div id="PartialView">
   Click <input type="button" id="button" value="here"></input> to display a javascript message.
</div>

페이지가 처음 로드되면 "Javascript 메시지를 표시하려면 여기를 클릭하십시오"를 클릭하면 "버튼 클릭"이라는 Javascript 경고 메시지가 나타납니다.그러나 "부분 보기를 로드하려면 여기를 클릭하십시오"를 클릭하면 Javascript 알림 메시지가 표시되는 버튼을 클릭해도 효과가 없습니다.클릭 이벤트가 더 이상 실행되지 않는 것 같습니다.

JQuery에서 이 문제가 발생하는 이유와 해결 방법을 아는 사람이 있습니까?이 문제는 이벤트를 사용하는 다른 JQuery 플러그인에서도 발생합니다.

해결책을 찾았습니다.

다음을 시도해 보십시오.

$(document).on("click", "YOUR_SELECTOR", function(e){
  /// Do some stuff ...
});

다음 대신:

$("YOUR_SELECTOR").on("click", function(e){
  /// Do some stuff ...
});

이 문제를 해결하는 가장 쉬운 방법은 Live() 방법을 사용하는 것입니다.

<script type="text/javascript"> 
         $(document).ready(function() { 
             $("#button").live('click', function() { 
                 alert('button clicked'); 
             }); 
         });    
</script>  

<script>
   $(document).ready(function(){
      $("input[id^=button]").live('click', function() { 
               //Your Code     

    }); 
});
</script>

제게도 효과가 있는 것은 부분적인 뷰에 jquery를 넣는 것입니다.로드된 보기의 컨트롤만 참조하면 됩니다. 그렇지 않으면 컨트롤에 대해 두 번 등록된 핸들러가 표시될 수 있습니다.

PartialView.ascx:

<div id="PartialView">
   Click <input type="button" id="button" value="here"></input> to display a javascript message.
</div>
<script type="text/javascript">
     $(document).ready(function() {
         $("#PartialView").find("#button").click(function() {
             alert('button clicked');
         });
     });   
 </script>  

이러한 솔루션 중 어떤 것도 저에게 효과가 없었기 때문에, 저는 다음과 같은 일을 해야만 했습니다.

1. 부분 보기를 만들고 모든 JavaScript 참조를 해당 파일에 넣었습니다.
2. 나는 이런 디브를 만들었습니다.

<div id="js">
       @Html.Partial("[Your_Path]")
</div>

3. 그 후에 일부 페이지를 로드하면 JavaScript에서 이 작업을 수행합니다.

$('#js').load('/Your_Controller/Your_Partial_function');

언급URL : https://stackoverflow.com/questions/2195168/jquery-events-dont-work-with-asp-net-mvc-partial-views