JQuery ne fonctionne pas avec ASP.NET MVC Vue Partielle sur

J'essaie d'obtenir JQuery événements de travailler avec des vues partielles en ASP.NET MVC. Cependant, une fois que vous chargez une vue partielle par Ajax, JQuery ne semble pas en mesure de déclencher des événements pour l'un quelconque des éléments dans la vue partielle. Je soupçonne que ce problème peut aussi se produire si vous utilisez d'autres cadres ou des bibliothèques JavaScript à charge partielle du code html avec l'Ajax.

Par exemple, considérons l'exemple suivant:

Contrôleur:

 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 le chargement de la page pour la première fois, vous pouvez cliquer sur "Cliquez ici pour afficher un message Javascript" et vous obtiendrez une alerte Javascript message qui dit "bouton cliqué". Cependant, une fois que vous cliquez sur "Cliquez ici pour charger vue partielle", en cliquant sur le bouton qui est censé apporter le Javascript message d'alerte n'a aucun effet.
Il semble que le "clic" de l'événement n'est pas déclenché plus.

Personne ne sait pourquoi ce problème se produit avec JQuery et comment les corriger? Ce problème se produit également avec d'autres plugins JQuery qui utilisent des événements.

InformationsquelleAutor dritan | 2010-02-03

47

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 ...
});
```
- Merci!!!!!! Cela a fonctionné pour moi et est une solution très simple. Cependant, je ne suis pas suffisamment compétent pour connaître les avantages et les inconvénients entre le présent et le .live() la méthode.
- est obsolète "de jQuery 1.7, l' .live() la méthode est obsolète. Utiliser .sur() pour attacher les gestionnaires d'événements. Les utilisateurs des anciennes versions de jQuery doit utiliser .délégué (), de préférence à d' .live()."
- merci pour votre réponse, il a fait un travail pour moi! Étrangement ce problème ne s'est produite dans MVC 5 (après le refactoring d'une application MVC 3 à MVC 5). Pour MVC 3 "$("YOUR_SELECTOR").sur(..." version a fonctionné sans aucun problème. Peut-être quelqu'un a une explication pour ça?
- excellente réponse, il a travaillé enfin pour moi j'ai été à deux heures à la recherche d'une réponse!
- Here est similaire la solution si vous l'avez vue partielle qui charge le contenu dynamique après le chargement de la page. Espoir aide à quelqu'un.
- Je me demande pourquoi cela fonctionne et l'autre pas sur la vue partielle? Je suis à la recherche d'une explication. Merci!
InformationsquelleAutor PEOudin
10

La façon la plus simple de gérer cela pourrait être d'utiliser le live() méthode:
```
<script type="text/javascript"> 
         $(document).ready(function() { 
             $("#button").live('click', function() { 
                 alert('button clicked'); 
             }); 
         });    
</script>  
```
- Génial. Cela fonctionne en effet. Selon la documentation officielle live() peut être utilisé pour attacher un gestionnaire à l'événement pour tous les éléments qui correspondent au sélecteur de courant, maintenant ou dans l'avenir. Le seul inconvénient est que les autres personnes qui ont écrit les plugins n'ont pas apparemment utiliser le live de la méthode. Par conséquent, pour qu'il fonctionne avec des plugins existants, quelqu'un serait probablement besoin de creuser dans le code source et le modifier.
- Vrai. Ou après le contenu est ajouté à la page, vous pouvez appeler le plugin de nouveau au lieu de simplement au chargement de la page. Si la réponse suffit, s'il vous plaît marquer comme acceptée...
- Cette réponse est obsolète, voir la réponse de PEOudin.
InformationsquelleAutor mkedobbs

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

    }); 
});
</script>

InformationsquelleAutor Mohammad Imran

Également ce qui fonctionne pour moi est de mettre le jquery de choses dans la vue partielle. Juste assurez-vous que les contrôles dans les chargé de vue sont référencés, sinon vous risquez d'obtenir un gestionnaire qui est 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>

InformationsquelleAutor John Landheer

0

Aucune de Ces solution a fonctionné pour moi, donc j'ai eu à faire ces choses à travailler:
1. J'ai créé une vue partielle et mis tout mon JavaScript références dans ce fichier
2. J'ai créé un div comme ceci
```
<div id="js">
       @Html.Partial("[Your_Path]")
</div>
```
3.Lorsque je charge quelques éléments de la page après que je le fais en JavaScript:
```
$('#js').load('/Your_Controller/Your_Partial_function');
```
InformationsquelleAutor Farid Amiri

Vous devez vous connecter pour publier un commentaire.