Toggling input with one parent .click() action

Question

I'm having trouble trying to find the proper way to make it work :

I got a table that with multiple cells :

$('tr > td').click(function()

each time the cell is clicked, I add to this cell an input and 2 buttons (one button is to validate, other one is to delete the whole thing in the cell so it deletes the input and both buttons)

The problem is when I click on the delete button it also triggers the

$('tr > td').click(function()

so what it does is that it removes the input and the 2 buttons but add it back.

what I need is that :

if cell is empty : add input + 2 buttons if remove button is clicked : remove input + 2 buttons from the cell cell can only have 1 time the input and 2 buttons (so no multiples inputs and more than 2 buttons)

I've been trying to make it right by using toggleClass and using if statement with hasClass but it never goes as I want to.

Thanks for your help, hope you can fill my lack of logic.

EDIT :

   function remove()
{
    event.stopPropagation();
    $(this).parent().
    $(this).parent().toggleClass('removed');
    $(this).prev().prev().remove();
    $(this).next().next().remove();
    $(this).remove();
}
    $('tr > td').click(function(event)
    {
        if ($(this).hasClass("done") == false && $(this).hasClass("removed") == false)
        {
            $(this).toggleClass("done");
            $(this).append("<input class='form-control' style='height:25px;width:105px;' type='text'></input>");
            $(this).append("<button onclick='remove();' type='button' id='removeUser' class='btn btn-xs'><span class='text-danger glyphicon glyphicon-remove'></span></button>");
            $(this).append("<button type='submit' id='addUser' class='btn btn-xs'><span class='text-success glyphicon glyphicon-ok'></span></button>");
        }

TD can only have 1 [input+2buttons]

If remove button is clicked, [input+2buttons] is removed

If TD is clicked and TD is empty, add [input+2buttons]

Sorry for being late it was launch time :)

stop propagation on buttons click – A. Wolff Dec 02 '13 at 11:17 — A. Wolff, Dec 02 '13 at 11:17

score 2 · Accepted Answer · edited Jan 01 '14 at 13:15

2

event.stopPropagation()

This prevent the click being triggered on the parent of the button too. So, when you click on your button, use this function to avoid the click being triggered on the td as well

DEMO

If you remove the e.stopPropagation also the alert on the div will appear. So, now you know how to use it.

Remember to change your button click handler from .click(function(){... to .click(function(event){... or .click(function(e){... as I did in the demo, so you can use the method.

EDIT to answer your EDIT

Change this

$('tr > td').click(function(event)
{

to this

$('tr > td').click(function(event)
{
    event.stopPropagation();

and remove event.stopPropagation from the remove() function please.

edited Jan 01 '14 at 13:15

BenMorel

34,448
50
182
322

answered Dec 02 '13 at 11:17

Kevin Cittadini

1,449
1
21
30

But if it's removed it has to add [input+2 buttons] again how ? – adaba Dec 02 '13 at 11:32
Your problem was about event bubbling. Did you try to fix your code using these suggestions? Are you asking us to provide you the full code of what are you trying to do? Can you explain better? Thank you. – Kevin Cittadini Dec 02 '13 at 11:37
Shouldn't it be on the remove function ? since the [input+2buttons] are child of the parent – adaba Dec 02 '13 at 11:50
Yes but it'll work anyway, i don't want to completely change your code to do something that'll work fine anyway – Kevin Cittadini Dec 02 '13 at 11:51

score 0 · Answer 2 · edited May 23 '17 at 12:28

0

event.stopPropagation()

further reading : Event bubling and capturing

edited May 23 '17 at 12:28

Community

1
1

answered Dec 02 '13 at 11:22

Ankit Tyagi

2,381
10
19

score 0 · Answer 3 · answered Dec 02 '13 at 11:25

0

Try this:

$('tr > td').click(function(event){
  event.stopPropagation();

  alert("The  element was clicked.");

});

answered Dec 02 '13 at 11:25

Mr.G

3,413
2
16
20

Toggling input with one parent .click() action

3 Answers3