JQuery-Ereignisse funktionieren nicht mit ASP.NET MVC Teilansichten

Question

Ich versuche, JQuery-Ereignisse mit Teilansichten in ASP.NET MVC zu arbeiten. Nachdem Sie jedoch eine Teilansicht über Ajax geladen haben, kann JQuery keine Ereignisse für eines der Elemente in der Teilansicht auslö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 wir zum Beispiel das folgende Beispiel:

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> 

Sobald die Seite geladen wird für th Wenn Sie das erste Mal auf "Klicken Sie hier, um eine Javascript-Nachricht anzuzeigen" klicken, erhalten Sie eine JavaScript-Warnmeldung mit der Meldung "Schaltfläche angeklickt". Sobald Sie jedoch auf "Klicken Sie hier, um Teilansicht zu laden" klicken, hat das Klicken auf die Schaltfläche, die die JavaScript-Warnmeldung bringen soll, keine Auswirkung. Es scheint, dass das Ereignis "click" nicht mehr ausgelöst wird.

Weiß jemand, warum dieses Problem mit JQuery auftritt und wie zu beheben? Dieses Problem tritt auch bei anderen JQuery-Plugins auf, die Ereignisse verwenden.

Answer 1

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

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

Answer 2

Was auch für mich funktioniert, ist die jquery Sachen in der Teilansicht zu setzen. Stellen Sie nur sicher, dass nur die Steuerelemente in der geladenen Ansicht referenziert werden, andernfalls erhalten Sie möglicherweise einen Handler, der für ein Steuerelement zweimal 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> 

Answer 3

ich eine Lösung gefunden haben:

Juste versuchen zu machen:

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

Statt:

$("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

Keine dieser Lösung für mich gearbeitet, so hatte ich diese Dinge zu tun, um zu arbeiten:

1. ich eine Teilansicht erstellt und alle meine JavaScript Referenzen in dieser Datei
2. ich ein div wie diese
setzen erstellt

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

3.When laden ich einige Teil Seite nach, dass ich das in JavaScript:

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