title: jquery and creating styles, how to check if the style already exists
body: <p>Hi people i have looked around but cant seem to find the answer i'm looking for.</p>
  
  <p>i have a search page which makes ajax calls, returns json data then creates a style based on the returned data and appends it to the  section of the DOM.
  The creation of the styles is working ok, but if a new search is made the style is duplicated and so my $(#element).slidetoggle() function gets duplicated and the slidetoggle opens and closes immedietly.</p>
  
  <p>ypu can see the page here: <a href="http://www.reelfilmlocations.co.uk/NEW%20Search/fullsearch_jq_keys.php" rel="nofollow">http://www.reelfilmlocations.co.uk/NEW%20Search/fullsearch_jq_keys.php</a></p>
  
  <p>(use as test data hounslow, north london and from categories: cemeteries)
  if the same search is made twice the styles for the results gets duplicated, and the slide toggle behaviour is duplicated.)</p>
  
  <p>my question is how do i check if the style is already in existence.</p>
  
  <p>the script that creates the style is as follows:</p>
  
  <pre><code>function makeCSS(id){
          var myUrl = 'getBoroughInfo.php';
          $.ajax({
              url: myUrl,
              type: 'POST',
              data: 'myID='+id,
              dataType: 'json',
              error: function(xhr, statusText, errorThrown){
                  // Work out what the error was and display the appropriate message
              },
              success: function(myData){
                  var items = myData.boroughs[0];
                  //console.log('borough: '+myData.boroughs);
  
                  $("&lt;style type='text/css'&gt; #link_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; float:left; margin-left: 10px;  cursor: pointer; padding: 1px; border: 1px solid "+items.color+";} &lt;/style&gt;").appendTo("head");
                  $("&lt;style type='text/css'&gt; #borough_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; } &lt;/style&gt;").appendTo("head");
                  $("&lt;style type='text/css'&gt; #searchHead_"+items.Borough_ID+"{ color:#000000; font-weight:bold; background-color:"+items.color+"; opacity: 1.0; cursor: pointer;} &lt;/style&gt;").appendTo("head");
                  //apply opacity
                  //$('#borough_'+items.Borough_ID).css({});
                  $('#borough_links').append('&lt;div id="link_'+items.Borough_ID+'"&gt;'+items.Borough_Name+'&lt;/div&gt;');
                  $('#results').append('&lt;div id="searchHead_'+items.Borough_ID+'"&gt;'+items.Borough_Name+'&lt;/div&gt;');
                  $('#results').append('&lt;div id="borough_'+items.Borough_ID+'"&gt;&lt;/div&gt;');
                  $('#link_'+items.Borough_ID).live('click', function(){
                      $('#borough_'+items.Borough_ID).slideToggle('slow', function() {
                          // Animation complete.
                      });
                  });
                  $('#searchHead_'+items.Borough_ID).live('click', function(){
                      $('#borough_'+items.Borough_ID).slideToggle('slow', function() {
                          // Animation complete.
                      });
                  });
              }
          });
      };
  </code></pre>
  
  <p>this is the line of code that creates one of my styles:</p>
  
  <pre><code>$("&lt;style type='text/css'&gt; #link_"+items.Borough_ID+"{ color:"+items.color+"; font-weight:bold; float:left; margin-left: 10px;  cursor: pointer; padding: 1px; border: 1px solid "+items.color+";} &lt;/style&gt;").appendTo("head");
  </code></pre>
  
  <p>so how do i check if this exists in the document already????
  a simple if statement would suffice for my needs i think.</p>