title: Applying the click event to a LI inside a UL instead of a button
body: <p>I really need your help.</p>
  
  <p>How can I, move from a button click (rename) to initiate my rename function to a click event inside a UL LI. I'd like to move the <code>$('button').click(fn);</code> to the LI whos value is 'rename'. As I am moving away from the button, and creating a separate right-click menu, it is important that the click event to fire my rename function come from the LI click.</p>
  
  <p>Here's a fiddle: <a href="http://jsfiddle.net/29objbzx/1/" rel="nofollow noreferrer">http://jsfiddle.net/29objbzx/1/</a></p>
  
  <p>A pic of the expected outcome is attached:</p>
  
  <p><img src="https://i.stack.imgur.com/fO5xj.png" alt="enter image description here"></p>
  
  <p>The code in question:</p>
  
  <pre><code>$(function(){
  
  
      $('#refdocs_list li').click(fn);
  
      $('button').click(fn);
  
      function fn(e){
      var el = $('#refdocs_list li.selected');
      if(e.target.type != "button"){
              el.removeClass('selected');
              $(e.target).addClass('selected');
      }else{  
          var txt = el.text(); 
          var newEl = $("&lt;input id='rename_refdoc'&gt;");
          newEl.blur(function(){
              el.html(newEl.val());       
          });
          newEl.val(txt);
          el.html(newEl);  
          newEl.focus().select();
      }     
      }   
  })();
  </code></pre>
  
  <p>I was thinking:</p>
  
  <pre><code>$('#right-click-menu li:eq(5)').click(function(e) {
      fn(e);
  });
  </code></pre>
  
  <p>but it's not working either.</p>