CODEWITHSUNDEEP
jqueryclickevent-bubbling
sadmicrowave
sadmicrowave

Reputation: 40892

jquery click event bubbling

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.

Upvotes: 0

Views: 1306

Answers (6)

Reza Owliaei
Reza Owliaei

Reputation: 3363

...and I prefer this one:

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

Upvotes: 1

Rick Burns
Rick Burns

Reputation: 1546

This is using pure jQuery, not a mixture of JavaScript and jQuery:

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

Upvotes: 0

reach4thelasers
reach4thelasers

Reputation: 26909

http://jsfiddle.net/46Pqf/6/

'this' from within an event handler refers to the thing that triggered the event, so you're adding the text from the li to the textbox.

Upvotes: 0

Ortiga
Ortiga

Reputation: 8814

This is not related to event bubbling

The first time you click, it's inner html is 'click me'

Then you change the inner html to <input type='text' name='right-name' value="click me"'>

The second time the user clicks, it will take this new inner html and do the same thing, becoming:

<input type='text' name='right-name' value=""<input type='text' name='right-name' value="click me"'>"'>

The click event is binded to the element itself. So, even removing the class you used in the selector, the event remains.

If you had delegated the selector, it would work, as the event is not binded to the li element ;)

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

See fiddle: http://jsfiddle.net/46Pqf/9/

Upvotes: 2

svjson
svjson

Reputation: 2115

The click-listener is attached to your li-element. So even after replacing the content with your textbox, the same li-element with the same behavior is present.

What you might want to do is to wrap the text in the li-element inside a span-element and attach the click-listener to that. (And then replace the entire span).

Another approach would be to remove the click listener after inserting the text input.

Upvotes: 3

Marius Ilie
Marius Ilie

Reputation: 3323

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 + "'>";
  }
});​

Upvotes: 5

Related Questions