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

Question

J'essaie de faire fonctionner les événements JQuery avec des vues partielles dans ASP.NET MVC. Toutefois, après avoir chargé une vue partielle via Ajax, JQuery ne semble pas pouvoir déclencher des événements pour l'un 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:

Controller:

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 que la page se charge pour th La première fois, vous pouvez cliquer sur "Cliquez ici pour afficher un message Javascript" et vous obtiendrez un message d'alerte Javascript qui dit "bouton cliqué". Cependant, une fois que vous avez cliqué sur "Cliquer ici pour charger la vue partielle", cliquer sur le bouton censé apporter le message d'alerte Javascript n'a aucun effet. Il semble que l'événement 'click' ne soit plus déclenché.

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

Answer 1

La meilleure façon de gérer ce serait d'utiliser la méthode en direct():

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

Answer 2

Ce qui fonctionne aussi pour moi est de mettre les choses jquery dans la vue partielle. Assurez-vous simplement que seuls les contrôles dans la vue chargée sont référencés, sinon vous pouvez 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> 

Answer 3

J'ai trouvé une solution:

essayer de faire Juste:

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

Au lieu 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

Aucune de ces solutions a fonctionné pour moi, donc je devais faire ces choses à travailler:

1. J'ai créé une vue partielle et mettre toutes mes références JavaScript dans ce fichier
2. J'ai créé un div comme celui-ci

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

3.Quand je charge une page partielle après que je fais en JavaScript:

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