Question

I’m having an issue that seems to be related to event bubbling.

When the user clicks on a list item I store the innerHTML of that element to a variable and replace the list item content with a textbox having the value of the new variable.

This works fine for the first click, but when the user clicks on the textbox the html of the textbox gets inserted also.

Here is a fiddle of my issue: http://jsfiddle.net/46Pqf/

What confuses me is that I am selecting a specific class on click which I am removing once the click event executes. Therefore, the function should not execute again when clicked since the original class in the selector is no longer in the element.

Any help on this would be greatly appreciated.

Answer 1

The click event is attached to the element itself, not to the class. Try this instead:

$('.column-header li.nottextbox').click(function(){
  if( $(this).hasClass('nottextbox') ) {
    $(this).removeClass('nottextbox');
    var text = this.innerHTML;
    this.innerHTML = "<input type='text' name='right-name' value='" + text + "'>";
  }
});​