title: javascript, event propagation, and input fields
body: <p>So I have an input field, that when you goto interact with it with the mouse, it basically wont work. This is because:</p>
  
  <ul>
  <li>The input is created after load by expanding that item in edit mode</li>
  <li>To expand the item, we use a click event on an li, which is a parent of the  title which gets replaced with the input</li>
  <li>Because of the way the app works, we need to use live instead of click, which prevents using stopPropagation()</li>
  </ul>
  
  <p>So we are using:</p>
  
  <pre><code>$('li').live("click",function(e) {
      if ($(e.target).is('input') ) { return; }
  
      // do stuff
  });
  </code></pre>
  
  <p>Then because of this, obviously any time the mouse tries to click in the input, either to move the cursor, highlight its contents, etc, it just ignores it.</p>
  
  <p>If I remove the target line, when I click in the input it closes the li.</p>
  
  <p><strong>So... my question:</strong> Any idea how to make the input clickable, without closing the li, and still being able to use live instead of click?</p>