Los eventos de JQuery no funcionan con ASP.NET MVC Vistas parciales

Question

Estoy intentando que los eventos de JQuery funcionen con vistas parciales en ASP.NET MVC. Sin embargo, después de cargar una vista parcial a través de Ajax, JQuery parece no poder disparar eventos para ninguno de los elementos en la vista parcial. Sospecho que este problema también ocurrirá si está utilizando otros marcos o bibliotecas de JavaScript para cargar código html parcial con Ajax.

Por ejemplo, consideremos el siguiente ejemplo:

controlador:

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> 

Una vez se carga la página para th La primera vez, puede hacer clic en "Haga clic aquí para ver un mensaje de Javascript" y obtendrá un mensaje de alerta de Javascript que dice "botón presionado". Sin embargo, una vez que haga clic en "Haga clic aquí para cargar la vista parcial", hacer clic en el botón que se supone que trae el mensaje de alerta de Javascript no tiene ningún efecto. Parece que el evento 'clic' ya no se está disparando.

¿Alguien sabe por qué ocurre este problema con JQuery y cómo solucionarlo? Este problema también ocurre con otros complementos de JQuery que usan eventos.

Answer 1

La forma más fácil de manejar esto sería utilizar el método directo():

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

Answer 2

Lo que también funciona para mí es poner las cosas jQuery en la vista parcial. Solo asegúrese de que solo se haga referencia a los controles en la vista cargada, de lo contrario, puede obtener un controlador registrado dos veces para un control.

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> 

Answer 3

He encontrado una solución:

Juste tratar de hacer:

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

En lugar de:

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

Answer 4

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

    }); 
}); 
</script> 

Answer 5

Ninguno de estos solución que funcionó para mí, por lo que tenía que hacer estas cosas para trabajar:

1. creé una vista parcial y poner todas mis referencias de JavaScript en ese archivo
2. he creado un div como esto

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

3. Cuando me carga alguna parte de la página después de que hago esto en JavaScript:

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