webentwicklung-frage-antwort-db.com.de

JQuery-Ereignisse funktionieren nicht mit ASP.NET MVC-Teilansichten

Ich versuche, dass JQuery-Ereignisse mit Teilansichten in ASP.NET MVC arbeiten. Nachdem Sie eine Teilansicht über Ajax geladen haben, scheint JQuery jedoch nicht in der Lage zu sein, Ereignisse für eines der Elemente in der Teilansicht auszulösen. Ich vermute, dass dieses Problem auch auftritt, wenn Sie andere Frameworks oder JavaScript-Bibliotheken verwenden, um partiellen HTML-Code mit Ajax zu laden.

Betrachten Sie zum Beispiel das folgende Beispiel:

Regler:

 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>

Sobald die Seite zum ersten Mal geladen wird, können Sie auf "Klicken Sie hier, um eine Javascript-Nachricht anzuzeigen" klicken, und Sie erhalten eine Javascript-Warnmeldung mit der Meldung "Schaltfläche angeklickt". Wenn Sie jedoch auf die Schaltfläche "Klicken Sie hier, um die Teilansicht zu laden" klicken, hat das Klicken auf die Schaltfläche, die die Javascript-Warnmeldung enthalten soll, keine Auswirkungen nicht mehr gefeuert werden.

Weiß jemand, warum dieses Problem bei JQuery auftritt und wie es behoben werden kann? Dieses Problem tritt auch bei anderen JQuery-Plugins auf, die Ereignisse verwenden.

21
dritan

Ich habe eine Lösung gefunden:

Juste versucht zu machen:

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

Anstatt :

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

Der einfachste Weg, dies zu handhaben, wäre die Verwendung der live () -Methode:

<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

Keine dieser Lösungen funktionierte für mich, daher musste ich folgende Dinge tun, um zu funktionieren:

  1. Ich habe eine Teilansicht erstellt und alle meine JavaScript-Referenzen in diese Datei eingefügt
  2. Ich habe so ein Div erstellt
<div id="js">
       @Html.Partial("[Your_Path]")
</div>

3.Wenn ich einige Seiten danach lade, mache ich dies in JavaScript:

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

Was für mich auch funktioniert, ist das Jquery-Zeug in der Teilansicht zu platzieren. Stellen Sie nur sicher, dass nur Steuerelemente in der geladenen Ansicht referenziert werden. Andernfalls erhalten Sie möglicherweise einen Handler, der zweimal für ein Steuerelement registriert ist.

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