jQuery change events on docready
<p>I want to run part of a function when the page initially loads, but the majority of the <code>change</code> event should only run when the target is then subsequently interacted with.</p>

<p>The problem is that the two events are not unrelated - on page load I want to show certain divs, and then I want a click action that shows/hides the divs. I can get these two parts to run separately, but haven't been able to combine them.</p>

<p>My question is, what is the best way to achieve this separation? Is there a method in jQuery that says 'only run this part once' or 'run this part on page load, this part onclick'?</p>

<p>As an example, I have this code that loads on Docready (which uses <code>.change();</code> so that it runs immediately):</p>

<pre><code>$(function() {
  $('.trigger :checkbox').change(function() {
    $(this).parent().nextAll('ul.hidden').toggle(this.checked);
  }).change();
});
</code></pre>

<p>But I alse want to run this code when someone clicks on one of my <code>.trigger</code> classes:</p>

<pre><code>$('.trigger :checkbox').change(function() {
    var $target = $(this).parent().nextAll('.hidden'); // go up a level and then look for the next list with the hidden class
    $(this).parent().toggleClass('open');   // the class of the label needs to change, so find the parent of the checkbox
    $target.fadeToggle();
    if( $(this).is(':checked') ) {
        $target.find('.hidden').css('display', 'none'); // hide all submenus
    } else {
        $target.find(':checkbox').removeAttr('checked'); // untick all checkboxes in sub-menu if unchecking
    }                                                                                   
});
</code></pre>

<p>Currently, the click event gets very confused.</p>
