title: Can't bind 'onchange' event on div inside ul
body: <p>I have this html:</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;
      &lt;a href="#"&gt;
          &lt;div&gt;&lt;/div&gt;
          Actions
          &lt;div&gt;&lt;/div&gt;
      &lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a&gt;
                  &lt;div&gt;&lt;/div&gt;
                  Create New Entry
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;span&gt;Client:&lt;span&gt;
      &lt;select data-filter-name="clients" id="client_filter"&gt;
      &lt;option value="0" {if $selectedClient == 0} selected {/if}&gt;All&lt;/option&gt;
      {foreach from=$clients key=k item=client}
      &lt;option value="{$k}" {if $selectedClient == $k} selected {/if}&gt;{$client}&lt;/option&gt;
      {/foreach}
      &lt;/select&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>In JS, I tried this:</p>
  
  <pre><code>$(document).ready(function() {
      $('#client_filter').on('change', function(){
          window.location = "/index.php?client_id=" +  $(this).val();
     });
  });
  </code></pre>
  
  <p>And event 'onchange' is not attached!
  When I click on the select box, nothing happend. Why?
  If I place the select box outside  it is working.</p>