Assign and delete click event

Question

I apologize in advance for my English ...

I am creating an editable table cell. In this table, I want to delete the click event on the cell (td), but click on the other cells.

$("#idTable").on("click", "td", function (e) { var oTxtbox = $('<input type="text" value="' + $(this).text() + '"/>'); $(this).html(oTxtbox); // I try to remove the event $(this).off(e); // $("#idTable").off("click", $(this) ); // other code }); 

Using the instruction $(this).off(e) I delete the event of all cells, instead $("#idTable").off("click", $(this) ) I do not delete anything: all cells are viewable.

Can you help me?

UPDATE 1: This is a demo of my example: CODE EXAMPLE

UPDATE 2: Now I have another problem with events: if the user goes outside the table, I want to relink / reattach the event to td. This is the full code link: NO EVENTS

What am I doing wrong now?

Answer 1

I don't think $(this) is what you think. This is a <td> match where the event is not captured (it hits $("#idTable") when it bubbles up.

Replacing the .off lines .off this line inside your handler will do what you want:

 $this.on('click', function(e) {e.stopPropagation();} ); 

Answer 2

Edit

I just saw that you found a solution, sweet :).

For completeness, although I leave my answer as I finally found how to completely disable events.

You use dynamic bindings and, thus, detaching a separate element, which is rather complicated due to the fact that the event always bubbles up to the static element it is associated with.

As you can see from another answer, you can overwrite the click event with the new click event and stop the distribution.

However , that still leaves you with an element that has an event that always fires when clicked, even if it doesn't bubble up.

In the example below, the event is really untied, leaving you without a trace and not requiring the distribution to be stopped because the event is completely unconnected:

 $(document).one('click', 'div', function(e) { $(this).parent().find("div").one('click.NewClick', function() { $('#result').append(this.id + " was clicked<br />"); }); $(this).click(); });​ 

DEMO - Disable individual items linked dynamically

In the above demo, I use one () to ensure the event is automatically turned off,

An external one() is required for logic, an internal one() is your requirement, since you wanted the unbound event to be fired.

I bind the original click event, as usual, to the dynamic 'div' selector using one() .

However, the ones that I'm inside the click event, after one of them has been clicked, I re-bind the click event to the elements again using one() , this time using a static selector, although there are currently elements. I also use the 'click.namespace' namespace to ensure that the decoupling of the outer one() does not get rid of the new bindings.

Now I have all my divs perfectly connected with one() , which means that they automatically turn off completely after clicking.

To prevent the user from double-clicking after the first click, I automatically fire the click ( $(this).click() ) event of the element that was triggered by the initial event, which makes it simple for the user.

Your code should be able to use it with code like the one below:

 $("#idTable").one("click", "td", function(e) { $(this).parent().find("td").one('click.NewClick', function() { var oTxtbox = $('<input type="text" value="' + $(this).text() + '"/>'); $(this).html(oTxtbox); // other code }); $(this).click(); });​ 

Note the use of one () instead of on () .
Of course, internal snapping may be what you will ever need, one() was only selected when you wanted the event to be disabled after an element is clicked.

Answer 3

Have you tried using unbind ?

 $("#idTable").on("click", "td", function (e) { var item=$(this); var oTxtbox = $('<input type="text" value="' + item.text() + '"/>'); item.html(oTxtbox); item.unbind("click") }); 

http://api.jquery.com/unbind/

Remove the previously attached event handler from the elements.

EDIT: When we need to remove the handler from ourselves, we need to do this approach.

So the code should be

 $("#idTable").on("click", "td", function (e) { var item=$(this); var oTxtbox = $('<input type="text" value="' + item.text() + '"/>'); item.html(oTxtbox); item.unbind(e) }); 

In this case, the handler must take a parameter so that we can capture the event object and use it to disconnect the handler after the third click. The event object contains the context necessary for .unbind () to find out which handler to remove.

Working example: http://jsfiddle.net/tRNhJ/24/