Run a function on fields within a specific div only

Run a function on fields within a specific div only

Hi all,

I have had some success with this function but I'm doing something wrong which I can't get a handle on. Any help or pointers appreciated. I have a set of jQuery tabs which I am using to divide a long form up into sections. For the first 'background' section I want each single field to be updated once their value has been changed by the user. This is done using a jquery.post() function which is working perfectly. But when the user is changing fields in the 'history' or other tabs, I don't want the same function to run (it's going to be data which won't suit the onchange updating). So, I want the function to run ONLY if the user is filling out fields in the 'background' div/tab.

Here's a rough idea of one of the many ways I've tried to approach this:

  1. <script type="text/javascript">
    $(document).ready(function(){
        $('#background > input, textarea').change(function(){
            my autoUpdate function  which works perfectly sits here;
           } );
        });
    });
    </script>








  4. <div id="background">
  5.       <input name="whatever1" /> // I want this to trigger the 'autoUpdate' function
  6.       <textarea name="whatever2"></textarea> // I want this to trigger the 'autoUpdate' function
  7. </div>
  8. <div id="history">
  9.       <input name="historyWhatever1" /> // I DON'T want this to trigger the 'autoUpdate' function
  10.       <textarea name="historyWhatever2" /> // I DON'T want this to trigger the 'autoUpdate' function
  11. </div>
I have tried a good few variations on trying to apply the  function only to the fields in the 'background' div, but with no success - changing the field values in 'history' or any other tab/div also fires off the function. P.S. I am aware that the above code doesn't seem to make practical sense but this is just a precis of the code - the real user case makes more sense ;-)

cheers

Mike