title: jQuery highlight matched elements with live() or on()
body: <p>in my <a href="http://jsfiddle.net/RVermeulen/26VeD/37/" rel="nofollow">jsFiddle</a> example can you see that I made a button where I add some elements and links to delete this elements. In this example it is not about going to delete the elements, but to hover the (remove)link made by clicking the button so it highlights the element with the same "number" attribute.</p>
  
  <p>I have tried to use <code>live();</code> and <code>on();</code> for it, but it does not do anything, because the items are made after building the page.</p>
  
  <p>I prefer to use <code>on();</code> now because jQuery says:</p>
  
  <blockquote>
    <p>As of jQuery 1.7, the .live() method is deprecated. Use .on() to
    attach event handlers. Users of older versions of jQuery should use
    .delegate() in preference to .live().</p>
  </blockquote>
  
  <p><strong>My jQuery code:</strong></p>
  
  <pre><code>    function numbers() {
          return $('#links span').length;
      }
  
      $('#add').on('click', function () {
          $('#links').append('&lt;span number="' + (numbers() + 1) + '"&gt;Remove element ' + (numbers() + 1) + '&lt;/span&gt;&lt;br /&gt;');
          $('#elements').append('&lt;div number="' + numbers() + '" class="element"&gt;Element ' + numbers() + '&lt;/div&gt;');
      });
  
      $('#links span').live('hover', function () {
          var number = $(this).attr('number');
          if ($('#elements .element').attr('number') == number) {
              $(this).addClass('highlight');
          }
  
  });
  </code></pre>