javascript - AJAX 调用重新加载仅有效一次

Question

我是 AJAX 新手，已经问了一些问题，但我还有另一个问题，我使用 AJAX 调用自动将下拉列表中的值保存到数据库，这很好用，但是每次我更改值(它们是多个下拉菜单，每个下拉菜单可以保存多个值)我希望 div 更新以反射(reflect)值的变化。我的AJAX如下:

<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>

因此，当我更改一个下拉框中(在 div1 中)中的值时，它会刷新该值，但如果我要更改相同或不同下拉框中的另一个值，它不再刷新 div 或将值保存到我的DB，如果我的 AJAX 中没有重新加载位，我可以更改多个字段中的值并保存，但是使用重新加载部分，它只会发生一次

-----编辑-----

好的，进一步提问，我用过

  $('#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() {});
                   }
        })
    });
  });

即使对于多个选择更改，这也非常有效。但是，如果我在几个 div(EG div1、div2 和 div3)中有一些选择该怎么办？我如何调整此代码以便能够在任何 div 发生更改时刷新所有 div，或者只是为每个 div 调整代码 3 次。

-----编辑-----谢谢大家，我可以用

做到这一点

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

伊恩

Answer 1

你的监听器绑定(bind)到 select 元素，我敢打赌它会被吹走并被 load() 取代。查看event delegation 。 jQuery 让一切变得简单。尝试将监听器绑定(bind)到“#div1”

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

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