title: How to call ajax on every focus out in jquery
body: <p>Well i am developing a web application for marbal factory. Now i am facing an issue i have multiple rows of records where user can edit it simply i have five field of each records in shape of input what i want when user change value an ajax request should fire and update the data according to the row id i have done it but the problem is i have to rewrite the whole ajax code for different input fields i want something generic.</p>
  
  <p><strong>here is my html</strong></p>
  
  <pre><code>&lt;div class="l-row" data-value="&lt;?=$row-&gt;id; ?&gt;"&gt;
                  &lt;div class="l-col-md-2"&gt;
                    &lt;div class="form-group has-info"&gt;
                      &lt;label for="inputInfo1" class="control-label"&gt;Item&lt;/label&gt;
                     &lt;input type="text" name="item" id="item" value="&lt;?=$row-&gt;name?&gt;" class="form-control"  /&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
  
                  &lt;div class="l-col-md-1"&gt;
                     &lt;div class="form-group has-info"&gt;
                      &lt;label for="inputInfo1" class="control-label"&gt;Size&lt;/label&gt;
                        &lt;input type="text" name="size" id="size" value="&lt;?=$row-&gt;size?&gt;" class="form-control"  /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="l-col-md-1"&gt;
                     &lt;div class="form-group has-info"&gt;
                      &lt;label for="inputInfo1" class="control-label"&gt;Type&lt;/label&gt;
                     &lt;input type="text" name="type" id="type" value="&lt;?=$row-&gt;type?&gt;" class="form-control"  /&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="l-col-md-1"&gt;
                     &lt;div class="form-group has-info"&gt;
                      &lt;label for="inputInfo1" class="control-label"&gt;Thickness&lt;/label&gt;
                      &lt;input type="text" name="thickness" id="thickness" value="&lt;?=$row-&gt;thickness;?&gt;" class="form-control"&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                    &lt;div class="l-col-md-1"&gt;
                     &lt;div class="form-group has-info"&gt;
                      &lt;label for="inputInfo1" class="control-label"&gt;Feet&lt;/label&gt;
                      &lt;input type="text" name="feet" id="feet" value="&lt;?=$row-&gt;feet;?&gt;" class="form-control"&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
  
                    &lt;div class="l-col-md-1"&gt;
                     &lt;div class="form-group has-info"&gt;
                      &lt;label for="inputInfo1" class="control-label"&gt;Sale&lt;/label&gt;
                      &lt;input type="text" name="sale" readonly="readonly" id="sale" value="&lt;?=$row-&gt;sale;?&gt;" class="form-control"&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="l-col-md-2"&gt;
                     &lt;div class="form-group has-info"&gt;
                      &lt;label for="inputInfo1" class="control-label"&gt;S-Amount&lt;/label&gt;
                      &lt;input type="text" name="s_amount" readonly="readonly" id="s_amount" value="&lt;?=$row-&gt;s_amount;?&gt;" class="form-control"&gt;
                    &lt;/div&gt;
                    &lt;/div&gt;
  
  
                  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is my jquery script</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
   $(document).on('focusout','#item', function() {
    $agents=$(this).closest('.l-row');
    var valu=$agents.attr('data-value');
    var item=$agents.find('#item').val();
    var size=$agents.find('#size').val();
    var type=$agents.find('#type').val();
    var thickness=$agents.find('#thickness').val();
    var feet=$agents.find('#feet').val();
    var sale=$agents.find('#sale').val();
    var s_amount=$agents.find('#s_amount').val();
  
    alert(item);
    var page_id="&lt;?=$page=basename($_SERVER['PHP_SELF']); ?&gt;";
    $.ajax({
      url: '&lt;?=base_url()?&gt;record_edit',
      type: 'post',
      data: 'id='+valu+'&amp;page_id='+page_id,
      success:function(data)
      {
        //alert(data);
      }
    });   
   });
   &lt;/script&gt;
  </code></pre>