Evento de clic de jquery burbujeando

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.

Cualquier ayuda sobre esto sería muy apreciada.

preguntado el 09 de marzo de 12 a las 14:03

Intenta reemplazar $(this) con input. Compruébalo aquí: jsfiddle.net/46Pqf/7 -

6 Respuestas

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

respondido 09 mar '12, 14:03

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.

respondido 09 mar '12, 14:03

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

Ver violín: http://jsfiddle.net/46Pqf/9/

respondido 09 mar '12, 14:03

...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);
});​

respondido 09 mar '12, 14:03

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.

respondido 09 mar '12, 14:03

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

respondido 09 mar '12, 14:03

Jquery is javascript! It's a javascript framework written in javascript. - Reza Owliaei

Yes it is, but if you're using a Framework you might as well use it to your advantage. Not mixing html() and innerHtml, $(this) and this. - Rick Burns

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.