События JQuery не работают с частичными представлениями ASP.NET MVC

Question

Я пытаюсь заставить события JQuery работать с частичными представлениями в ASP.NET MVC. Однако после того, как вы загрузите частичное представление через Ajax, JQuery, похоже, не сможет запустить события ни для одного из элементов в частичном представлении. Я подозреваю, что эта проблема также произойдет, если вы используете другие фреймворки или библиотеки JavaScript для загрузки частичного 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, не будет иметь никакого эффекта. Похоже, что событие click больше не запускается.

Кто-нибудь знает, почему эта проблема возникает с JQuery и как ее исправить? Эта проблема также возникает с другими плагинами JQuery, которые используют события.

Answer 1

Я нашел решение:

Juste попробуйте сделать:

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

Вместо:

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

Answer 2

Самый простой способ справиться с этим - использовать метод live ():

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

Answer 3

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

    }); 
});
</script>

Answer 4

Ни одно из этих решений не сработало для меня, поэтому мне пришлось сделать следующее:

1. Я создал частичное представление и поместил все свои ссылки на JavaScript в этот файл
2. Я создал такой div

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

3.При загрузке частичной страницы я делаю это в JavaScript:

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

Answer 5

Что также работает для меня, так это поместить 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>