title: jQuery, where to load functions best practice
body: <p>I am using jQuery and I am loading dynamic HTML via PHP.  My question is, what is the best practice concerning elements/attributes that may or may not exist on any given page?  Should I have one .js file containing all the possibilities (I would think this is inefficient) or should I use a bunch of script tags (that seems also inefficient)?  Is there a "lazy" initialization way to do this?</p>
  
  <p>For instance, say I have the following:</p>
  
  <pre><code>&lt;div id="list"&gt;
     &lt;ul&gt;
        &lt;li&gt;some&lt;/li&gt;
        &lt;li&gt;stuff&lt;/li&gt;
        &lt;li&gt;here&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this list is generated only if necessary, not on all pages.  Should my global js file have the following:</p>
  
  <pre><code>$("#list").click( function(){ 
     $(this).removeClass('collapse').addClass('expand'); 
  });
  </code></pre>
  
  <p>Or should I add it in a script tag <del>just above the div that is being generated</del> at the bottom of the page after creating the div is output via PHP?</p>
  
  <p>Thanks SO, you guys are awesome.  Can't wait until I know enough to start answering some questions!</p>
  
  <p>Edit, just thought of a quick way to ask.  Which is better, jQuery running with a bunch of selectors that don't match or passing javascript in script tags via PHP?</p>