title: Error is generating even function is defined
body: <p>Click action generates this error message while function is defined<br>
  <strong>Uncaught typeError: undefined is not a function</strong>  </p>
  
  <p>Click left arrow makes all html invisible while code isn't deleted by jquery.
  <strong><a href="http://jsfiddle.net/Ze4z6/" rel="nofollow">jsFiddle here</a></strong></p>
  
  <pre><code>var left='.lessonNavigation li.expanded.left'  
  var actLsn='.lessonNavigation li.activeLesson'  
  var right='.lessonNavigation li.expanded.right'  
  var leftArrowHTML='&lt;li class="left arrow"&gt;&lt;i class="icon icon-arrow-left"&gt;&lt;/i&gt;&lt;/li&gt;'  
  var rightArrowHTML='&lt;li class="right arrow"&gt;&lt;i class="icon icon-arrow-right"&gt;&lt;/i&gt;&lt;/li&gt;'
  
  $('.lessonNavigation').on('click', '.left.arrow', function () {   
      $(right).attr('class','dn');  
      $('.arrow').remove();  
      $(actLsn).attr('class','expanded right');
      $(left).attr('class','activeLesson');  
      $(actLsn).previous().attr('class','expanded left');  
      $(actLsn).after(rightArrowHTML);  
      $(actLsn).before(leftArrowHTML);  
  });
  </code></pre>
  
  <p>HTML Code  </p>
  
  <pre><code>&lt;div class="lessonNavigation lesson"&gt;
      &lt;ul class="expandable"&gt;
          &lt;li class=""&gt;&lt;b&gt;L1&lt;/b&gt;&lt;span&gt;Recognize a digit represents 10 times the value&lt;/span&gt;&lt;/li&gt;
          &lt;li class="expanded left"&gt; &lt;b&gt;L2&lt;/b&gt;&lt;span&gt;Recognize a digit represents 10 times the value&lt;/span&gt;&lt;/li&gt;
          &lt;li class="left arrow"&gt;&lt;i class="icon icon-arrow-left"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="activeLesson"&gt;&lt;b&gt;L3&lt;/b&gt;&lt;span&gt;Recognize a digit represents 10 times the value&lt;/span&gt;&lt;/li&gt;
          &lt;li class="right arrow"&gt;&lt;i class="icon icon-arrow-right"&gt;&lt;/i&gt;&lt;/li&gt;
          &lt;li class="expanded right"&gt;&lt;b&gt;L4&lt;/b&gt;&lt;span&gt;Recognize a digit represents 10 times the value&lt;/span&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;b&gt;L5&lt;/b&gt;&lt;span&gt;Recognize a digit represents 10 times the value&lt;/span&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;b&gt;L6&lt;/b&gt;&lt;span&gt;Recognize a digit represents 10 times the value&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>