title: Select box calling another element's click event jquery
body: <p>I have a div on my page witch is hidden : AddSupplier, I have a button on my page witch must show the div if its not visible, but the same button saves some stuff if the div is visible. So all that is working but in this AddSupplier div there is a select box "ddSupplierTypes" and when the select box gets clicked the AddSupplierButton click event gets triggered why is this, and is there a work around? </p>
  
  <p>Tanks for any help.</p>
  
  <blockquote>
    <p>&lt;%@ Page Language="C#" %> 
     
        
        </p>
  
  <pre><code>    $().ready(function() {
          $('#AddSupplier').hide();
  
          $('[id$=AddSupplierButton]').click(function() {
              if ($('#AddSupplier').is(':visible')) {
                  //do this
                  alert('event fired');
              }
              else {
                  //do that
                  $('#AddSupplier').show();
  
              }
  
              return false;
          });
      });
  
  &lt;/script&gt; &lt;/head&gt; &lt;body&gt;
  &lt;form id="form1" runat="server"&gt;
  &lt;div id="wrapper"&gt;
  &lt;asp:ImageButton ID="AddSupplierButton" runat="server" Height="18px" 
  ImageUrl="~/images/add.png" 
  OnClientClick="return(false);"/&gt;
  &lt;/div&gt;
  &lt;div id="AddSupplier"&gt;
      &lt;select id="ddSupplierTypes"&gt;
      &lt;option value="S"&gt;ss&lt;/option&gt;
      &lt;option value="F"&gt;kk&lt;/option&gt;
      &lt;option value="W"&gt;oo&lt;/option&gt;
      &lt;option value="P"&gt;ii&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  &lt;/form&gt; 
  </code></pre>
    
    <p>
    </p>
  </blockquote>