title: Fire javascript after a partial view loads
body: <p>I have a view which loads a partial on the change event of several dropdowns:</p>
  
  <p>I have some javascript that calls an action:</p>
  
  <pre><code>$("#filterdd").on('change', function () {
      var datefrom = $('#fromdt').val().replace("/", "-").replace("/", "-");
      var dateto = $('#todt').val().replace("/", "-").replace("/", "-");      
      $("#partialexpcal").load('/home/experienceCalendarFilter?fromdt=' + datefrom + '&amp;todt=' + dateto);
  });
  </code></pre>
  
  <p>Then this returns a partial:</p>
  
  <pre><code>public ActionResult experienceCalendarFilter(string fromdt = "", string todt = "")
      {
          myModel model = new myModel();
          model = gd.getstuff(fromdt, todt);
  
          if (Request.IsAjaxRequest())
          {
              return PartialView("_expcalendar", model);
          }
          else
          {
              return View(model);
          }
      }
  
  &lt;div id="partialexpcal"&gt;
      @Html.Partial("_expcalendar", Model)
  &lt;/div&gt;
  </code></pre>
  
  <p>I am using jQuery Datetimepicker which need to fire after the partial has loaded:</p>
  
  <pre><code>function afterload() {
      $(".datefield").datepicker({ dateFormat: "dd/mm/yy", changeYear: true });
  
      $(function () {
          $.validator.addMethod('date',
          function (value, element) {
              if (this.optional(element)) {
                  return true;
              }
              var ok = true;
              try {
                  $.datepicker.parseDate('dd/mm/yy', value);
              }
              catch (err) {
                  ok = false;
              }
              return ok;
          });
          $(".datefield").datepicker({ dateFormat: 'dd/mm/yy', changeYear: true });
      });
  }
  </code></pre>
  
  <p>I have tried all of the following in both the parent view and the partial where 'expcalfilterdiv' is the main container in the partial view:</p>
  
  <pre><code>$('#expcalfilterdiv').ready(function () {
      alert("hit1");
      afterload()
  });
  </code></pre>
  
  <p>This hits but only on initial load not after the partial has been changed.</p>
  
  <pre><code>$('#expcalfilterdiv').live(function () {
      alert("hit1");
      afterload()
  });
  </code></pre>
  
  <p>This doesn't hit at all.</p>
  
  <pre><code>$('#expcalfilterdiv').livequery(function () {
      alert("hit1");
      afterload()
  });
  </code></pre>
  
  <p>Is there a way I can catch the Ajax success when doing it how I am?</p>