jquery - Partial view modal popup is not working at first postback -

i have pop in partial view not working when post back. using jquery ajax , partial view calling when click on user record in table.

here code on click partial view called.

 <td><a href="#" class="details" data-id="@item.teamid" data-dialogmodalbind=".dialog_content3">  @html.displayfor(modelitem => item.description)</a> </td> 

here code calling partial view

<div id="detailsplace" class="dialog_content3" style="display:none">      </div> 

here jquery code

<script type="text/javascript">      $(function ()     {         $('.details').click(function ()         {               var $buttonclicked = $(this);             var id = $buttonclicked.attr('data-id');              $.ajax(                 {                 url: '@url.action("details","team")',                     type: "post",                     datatype: "html",                 data: { id: id },                 success: function (partialview)                 {                     //event.preventdefault();                     $('#detailsplace').html(partialview);                 }             });         });     });  </script> 

here partial view

@model app.viewmodels.viewdetailteam @using app.helpers @{htmlhelpers.getdynamiclabels(model.dynamiclabel);}      <div class="dialogmodal_header"> @model.teamdetails.teamname</div>     <div class="dialogmodal_content">         <div class="main-content">             <div class="navi-but">                 <a href="#"><span class="previous">previous</span></a>                 <a href="#"><span style="padding-right:7px">next</span><span class="next"></span></a>                  <li class="dropdown">                     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="images/settings.png" /> </a>                     <ul class="dropdown-menu" role="menu">                         <li><a href="@url.action("edit", "team", new { id = model.teamdetails.teamid })">edit</a></li>                         <li><a href="@url.action("delete", "team", new { id = model.teamdetails.teamid })">delete</a></li>                     </ul>                 </li>              </div><br /><br />                   <div style="float:left;margin-top:15px;">                      @html.customlabel("lblteam","ct team name:")                 </div>                 <div style="margin-top:15px; margin-left:115px;">                     @model.teamdetails.teamname                 </div>                  <div style="float:left;margin-top:15px;">                      @html.customlabel("lbldescription","description:")                 </div>                 <div style="margin-top:15px; margin-left:115px;">                     @model.teamdetails.description                  </div>             <div style="float:left;margin-top:15px;">@html.customlabel("lblctusercount","user count:") </div>                 <div style="margin-top:15px; margin-left:115px;">                     @model.teamdetails.usercount                   </div>             </div>         </div> 

controller

 public actionresult details(int id)         {             session[applicationconstants.currentpageid] = 111;             flightcoremodel.user loggedinuser = new flightcoremodel.user();             int pageid = convert.toint16(session[applicationconstants.currentpageid]);             if (session[applicationconstants.usermodel] != null)             {                 loggedinuser = (flightcoremodel.user)session[applicationconstants.usermodel];             }             if (loggedinuser.userid > 0)             {                 viewdetailteam viewdetailteam = new viewdetailteam(flightdbcontext, loggedinuser.userid, pageid);                 viewdata["detailmodel"] = viewdetailteam;                 viewdetailteam.retrieve(id);                 return partialview("_teamdetails", viewdetailteam);                 //return view(viewdetailteam);             }             else             {                 return redirecttoaction("signin", "account", new { area = "" });             }             } 

change javasript below. access html code has been got ajax functions.

$(document).on('click','.details', function () {     {           var $buttonclicked = $(this);         var id = $buttonclicked.attr('data-id');          $.ajax(             {             url: '@url.action("details","team")',                 type: "post",                 datatype: "html",             data: { id: id },             success: function (partialview)             {                 //event.preventdefault();                 $('#detailsplace').html(partialview);             }         });     });