Gli eventi JQuery non funzionano con ASP.NET MVC Visualizzazioni parziali

Question

Sto cercando di ottenere eventi JQuery per lavorare con viste parziali in ASP.NET MVC. Tuttavia, dopo aver caricato una vista parziale tramite Ajax, JQuery sembra non essere in grado di generare eventi per nessuno degli elementi nella vista parziale. Sospetto che questo problema si verificherà anche se utilizzi altri framework o librerie JavaScript per caricare codice html parziale con Ajax.

Ad esempio, si consideri il seguente esempio:

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> 

Una volta che la pagina viene caricata per esimo La prima volta, puoi fare clic su "Fai clic qui per visualizzare un messaggio Javascript" e riceverai un messaggio di avviso Javascript che dice "pulsante cliccato". Tuttavia, dopo aver fatto clic su "Fai clic qui per caricare la vista parziale", facendo clic sul pulsante che dovrebbe portare il messaggio di avviso Javascript non ha alcun effetto. Sembra che l'evento "click" non venga più attivato.

Qualcuno sa perché questo problema si verifica con JQuery e come risolvere? Questo problema si verifica anche con altri plugin JQuery che utilizzano eventi.

Answer 1

Il modo più semplice per gestire questo sarebbe quello di utilizzare il metodo dal vivo():

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

Answer 2

Ciò che funziona anche per me è quello di mettere la roba jquery nella vista parziale. Assicurati che solo i controlli nella vista caricata siano referenziati, altrimenti potresti ottenere un gestore registrato due volte per un controllo.

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

ho trovato una soluzione:

Juste provare a fare:

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

Invece di:

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

Nessuna di queste soluzioni lavorato per me, quindi ho dovuto fare queste cose a lavorare:

1. ho creato una vista parziale e mettere tutti i miei riferimenti JavaScript in quel file
2. ho creato un div come questo

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

3. Quando ho caricare qualche pagina parziale dopo che faccio questo in JavaScript:

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