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

Я пытаюсь заставить события 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, которые используют события.

Ответы

Ответ 1

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

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

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

Вместо:

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

Ответ 2

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

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

Ответ 3

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

    }); 
});
</script>

Ответ 4

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

Ответ 5

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

  • Я создал частичный вид и поместил все мои ссылки JavaScript в этот файл
  • Я создал div, подобный этому
<div id="js">
       @Html.Partial("[Your_Path]")
</div>

3. Когда я загружаю некоторую часть страницы после этого, я делаю это в JavaScript:

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