ajax - jQuery runs only once -

there simple solution issue. have index page partial view. partial view contains list of links views, "back list" link gets list of links partial view. index page has jquery script ajax prevents page redirection , returns result partial view. so, if click link first time, result displayed partial view of index page. click "back list", , click link second time script not working , page redirects. wrong?

here code:

model "linklist":

using system; using system.collections.generic; using system.linq; using system.web;  namespace ajaxtest.models {     public partial class linklist     {         public int id { get; set; }         public string label { get; set; }         public string method { get; set; }         public string controller { get; set; }                 public string htmllabel { get; set; }     } } 

the controller has following code:

using system; using system.collections.generic; using system.linq; using system.web; using system.web.mvc; using ajaxtest.models;  namespace ajaxtest.controllers {     public class homecontroller : controller     {         public actionresult index()         {             return view();         }          public actionresult partialview(int id)         {             viewbag.id = id;             return view();         }          public actionresult partialslist()         {             list<linklist> list = new list<linklist>()              {                 new linklist{id = 1, label = "first partial", method = "partialview", htmllabel = "first-partial"},                 new linklist{id = 2, label = "second partial", method = "partialview",htmllabel = "second-partial"},                 new linklist{id = 3, label = "third partial", method = "partialview", htmllabel = "third-partial"}             };              return view(list);         }     } } 

and 3 view pages partialview.cshtml:

this partial view id = (@viewbag.id) 

partialslist.cshtml:

@model ienumerable<ajaxtest.models.linklist>  <div>      @foreach (var item in model)     {                     @html.actionlink(item.label, item.method, item.controller, new { id = item.id }, new { id = item.htmllabel })         <br />     }  </div> 

and index.cshtml:

@{     viewbag.title = "index"; }  <script type="text/javascript">     jquery(document).ready(function () {         $('#first-partial').click(function (event) {             event.preventdefault();             var url = $(this).attr('href');             $('#pview').load(url);         })         $('#second-partial').click(function (event) {             event.preventdefault();             var url = $(this).attr('href');             $('#pview').load(url);         })         $('#third-partial').click(function (event) {             event.preventdefault();             var url = $(this).attr('href');             $('#pview').load(url);         })         $('#backtolist').click(function (event) {             event.preventdefault();             var url = $(this).attr('href');             $('#pview').load(url);         })     }); </script>  <h2>index</h2>  <div id="index">     <fieldset>         <legend>index</legend>         index page!     </fieldset> </div> <div>     <fieldset>         <legend>partials</legend>         <br />         <fieldset>                         <div id="pview">                 @html.action("partialslist", "home", null)             </div>         </fieldset>         <div>             @html.actionlink("back list", "partialslist", "home", null, new { id = "backtolist" })     </div> </fieldset> </div> 

if want bind events dynamically created elements:

$(document).on('click', 'yourselector', function () {     console.log('event occured');     // event handler function call here }); 

jquery doc: https://api.jquery.com/on/

https://stackoverflow.com/a/29728269/2025923

https://stackoverflow.com/a/29788126/2025923