Refresh conent with JQuery/AJAX after using a MVC partial view

Question

Using the following JQuery/AJAX function I'm calling a partial view when an option is changed in a combobox named "ReportedIssue" that is also in the partial view. The is named "tableContent".

<script type="text/javascript">
    $(function() {
        $('#ReportedIssue')
      .change(function() {
          var styleValue = $(this).val();
          $('#tableContent').load(
          '/CurReport/TableResults',
          { style: styleValue }
        );
      })
      .change();
    });
</script>

My problem is that after the jump to the partial view I lose the link to the javascript. I think I'm supposed to use the JQuery ".live()" but I'm unsure.

In short, I want to re-establish the link between my JavaScript and my combobox and after the inclusion of the partial view's HTML.

I hope I'm being clear enough,

Aaron

Answer 1

Yes you should use live():

$('#ReportedIssue').live('click', function() {

Answer 2

As of jQuery 1.4 you can use the live handler with the change event. Simply change your code to work with it. If you are stuck with an earlier version of jQuery, you need to reapply the handler in the AJAX callback.

$(function() { 
    $('#ReportedIssue').live('change', function() { 
      var styleValue = $(this).val(); 
      $('#tableContent').load( 
          '/CurReport/TableResults', 
           { style: styleValue } 
      ); 
    })
});