web-dev-qa-db-fra.com

Les événements JQuery ne fonctionnent pas avec les vues partielles ASP.NET MVC

J'essaie de faire en sorte que les événements JQuery fonctionnent avec des vues partielles dans ASP.NET MVC. Cependant, une fois que vous avez chargé une vue partielle via Ajax, JQuery ne semble pas en mesure de déclencher des événements pour aucun des éléments de la vue partielle. Je pense que ce problème se produira également si vous utilisez d'autres frameworks ou bibliothèques JavaScript pour charger du code HTML partiel avec Ajax.

Par exemple, considérons l'exemple suivant:

Manette:

 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>

Une fois la page chargée pour la première fois, vous pouvez cliquer sur "Cliquez ici pour afficher un message Javascript" et vous obtiendrez un message d'alerte Javascript indiquant "bouton cliqué". Cependant, une fois que vous avez cliqué sur "Cliquez ici pour charger la vue partielle", le fait de cliquer sur le bouton censé afficher le message d'alerte Javascript n'a aucun effet. Il semble que l'événement "clic" soit ne plus être viré.

Quelqu'un sait-il pourquoi ce problème se produit avec JQuery et comment le résoudre? Ce problème se produit également avec d'autres plug-ins JQuery qui utilisent des événements.

jqueryasp.net-mvcajaxevents
21
dritan

J'ai trouvé une solution :

Juste essayer de faire:

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

Au lieu de :

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

Le moyen le plus simple de gérer cela serait d'utiliser la méthode live ():

<script type="text/javascript"> 
         $(document).ready(function() { 
             $("#button").live('click', function() { 
                 alert('button clicked'); 
             }); 
         });    
</script>
10
mkedobbs
<script>
   $(document).ready(function(){
      $("input[id^=button]").live('click', function() { 
               //Your Code     

    }); 
});
</script>
1
Mohammad Imran

Aucune de ces solutions ne fonctionnait pour moi, donc je devais faire ces choses pour travailler:

  1. J'ai créé une vue partielle et mis toutes mes références JavaScript dans ce fichier.
  2. J'ai créé une div comme ça
<div id="js">
       @Html.Partial("[Your_Path]")
</div>

3.Quand je charge une page partielle après cela, je le fais en JavaScript:

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

Ce qui fonctionne aussi pour moi, c’est de placer les éléments jQuery dans une vue partielle. Assurez-vous simplement que seuls les contrôles de la vue chargée sont référencés, sinon vous pouvez obtenir un gestionnaire enregistré deux fois pour un contrôle.

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>
0
John Landheer