0

I am New to AJAX and have already asked a few question son this matter, but i have another, I use an AJAX call to auto save a value from a drop down list to database, this works great, however every time i change a value (Their are multiple drop downs with several values each can hold) I want the div to update to reflect the change in value. The AJAX I have is as follows:

<script>
  $(document).ready(function(){
  $('select').on('change',function () {
          var statusVal = $(this).val();
          var job_id = $(this).prop('id');
          $.ajax({
                   type: "POST",
                   url: "saveStatus.php",
                   data: { statusType : statusVal, jobID: job_id },
            success: function(data) {   
                $('#div1').load('jobs.php #div1', function() {}); 

                   }
        })
    });
  });
</script>

So when I change a value in one drop down box (In div1) it refreshs the value, but if i was to change another value in the same or different drop down it no longer refreshs the div or saves the value to my DB, without the reload bit in my AJAX i can change the value in multple fields and it saves, but with the reload part it only happens once

-----EDIT-----

Ok further questioning, I have used 

  $('#div1').on( 'change', 'select', function( ) {                                              
        var statusVal = $(this).val();
          var job_id = $(this).prop('id');
          $.ajax({
                   type: "POST",
                   url: "saveStatus.php",
                   data: { statusType : statusVal, jobID: job_id },

                   success: function(data) {   
                        $('#div1').load('jobs.php #div1', function() {});
                   }
        })
    });
  });

and that works great even for multiple select changes. However what if I have a few selects in a few divs, EG div1, div2 and div3. How can I adapt this code to be able to refresh all divs on a change in any of the divs, or is a case of just having the code 3 times adapted for each div.

-----EDIT----- Thankyou all, I am able to do this with 

$('#div1, #div2').on( 'change', 'select', function( ) { //stuff

Ian

4

1 回答 1

2

您的听众被绑定到选择元素，我打赌它被吹走并被 load() 取代。查看事件委托。jQuery 使它变得容易。尝试在“#div1”上绑定监听器

$('#div1').on( 'change', 'select', function( e ) { //stuff

然后它也应该适用于刷新的内容。

于 2013-09-05T13:30:59.983 回答