JQuery делегат с якорями в IE

Question

У меня есть сайт, который отлично работает в Firefox и Chrome, но в IE 8 (еще не пробовал 7) некоторые делегаты .on не работают. В частности, те, которые используются для тегов привязки.

HTML:

    <ui id='daylist'>
      <li><a href="#" class="day-selected"><span>Day </span><span class='number'>1</span></a></li>
      <li><a href="#"><span>Day </span><span class='number'>2</span></a></li>
      <li><a href="#"><span>Day </span><span class='number'>3</span></a></li>
      <li><a href="#"><span>Day </span><span class='number'>4</span></a></li>
      <li><a href="#"><span>Day </span><span class='number'>5</span></a></li>
      <li><a href="#"><span>Day </span><span class='number'>6</span></a></li>
      <li><a href="#"><span>Day </span><span class='number'>7</span></a></li>
    </ui>

Javascript:

    $('#daylist').on('click', 'a', function(e) {
        alert('clicked');
        pickDay(this); //this isn't important, the alert isn't even happening
        return false;
    });

У меня есть JQuery 1,7 включены. Моя проблема в том, что предупреждение просто не вызывается вообще. Но только в IE

Answer 1

Измените свой HTML:

<ul id='daylist'>
  <li><a href="#" class="day-selected"><span>Day </span><span class='number'>1</span></a></li>
  <li><a href="#"><span>Day </span><span class='number'>2</span></a></li>
  <li><a href="#"><span>Day </span><span class='number'>3</span></a></li>
  <li><a href="#"><span>Day </span><span class='number'>4</span></a></li>
  <li><a href="#"><span>Day </span><span class='number'>5</span></a></li>
  <li><a href="#"><span>Day </span><span class='number'>6</span></a></li>
  <li><a href="#"><span>Day </span><span class='number'>7</span></a></li>
</ul>

Internet Explorer до версии 8 не принимает неизвестные теги HTML (например, теги HTML5). Однако вы можете решить эту проблему (если нужно), используя некоторый Javascript, такой как HTML5shim или HTML5shiv.