title: jQuery hidden ajax optimization
body: <pre><code>jQuery('select[field]').each(function(){
      var jobj = $(this);
      var pre_field_name = jobj.attr('filtered_by');
      var parent_field_name = jobj.attr('field');
      var data_url =jobj.attr('data-url');
      var val = jobj.val();
      $('select[name='+parent_field_name+']').change(function(){
          console.log('change');
          if($(this).val()){
              console.log('ajax');
              $.get(data_url, {'pk': $(this).val()}, function(response){
                  console.log('response');
                  var options = '';
                  for (var i = 0; i &lt; response.length; i++) {
                      options += '&lt;option value="' + response[i].value + '" '+  (val==response[i].value?'selected="selected"':'') +  '&gt;' + response[i].display + '&lt;/option&gt;';
                  }
                  jobj.html(options);
                  jobj.change();
              })
          } else {
              jobj.html('&lt;option value=""&gt;------&lt;/option&gt;');
              jobj.change();
          }
      }).change();
  
  })
  </code></pre>
  
  <p>If there are 3 elements on my page that satisfy this <code>jQuery('select[field]')</code> selector - then, in chrome logs I'll see six (doubled by <code>.change()</code> I guess) <code>response</code> log records. But in <code>network</code> tab of chrome console and in server logs, I see that there was only one request. What can be the reason?</p>