Clicked handler for dynamically created buttons in jquery

Question

I create a table in html, then populate it in the below table (drawTable gets called in my document.ready function). For each row, there is a button at the end to add another row with the same id, inserted directly below. The clicked handler for the table(#fieldTable) td elements works fine for all the buttons initially inserted. When they click the "+" button, it adds the row with a "-" button at the end. Now this shows up fine on the screen, but when clicked, the tables td clicked handler doesnt get fired, but the documents does.

I want to be able to capture the click on the remove ("-") button, and delete that row from the table.

function drawTable() {
    //fill a table I created in html, (not important for this question)
            //it now looks like this
    | ID | NAME  |  VALUE  | ACTION |
    | 1  | Test  | <input> |   +    |
            | 2  | Test2 | <input> |   +    |

    //where the action column is a button (+ indicates create a new row)
    //so when they click the grid this gets called
    $('#fieldTable td').click(function() {
    var row = $(this).parent().parent().children().index($(this).parent());
    var col = $(this).parent().children().index($(this));
    if(col != 3)
    { 
      return;
    }
    var text = $(this).parents('tr').find('td:last').text();
    var etiId = $(this).parents('tr').find('td:first').text();
    console.log(text);
    if(text == "+")
    {
      var $tr = $(this).closest('tr');
      var $clone = $tr.clone();
      $clone.find(':text').val('');
      $clone.find('td:nth-child(2)').text('');
      $clone.find('td:nth-child(4)').find('button').text('-');
      $tr.after($clone);
    }
    //so now the grid would look like this
    | ID | NAME  |  VALUE  | ACTION |
    | 1  | Test  | <input> |   +    |
    | 1  |       | <input> |   -    |
    | 2  | Test2 | <input> |   +    |

    //the issue is, if I click the "-" button, this handler does not get called
    // the document.on('click'...) does, but I am not sure how to determine the 
    // row/column of the button click and then remove that row
    else if(text == "-")
    {
      console.log("remove");
      $(this).parent().parent().remove();
    }
    });

    $(document).on('click', '.btnAddRemove', function() {
        console.log("document cliked");
   });
}

Explosion Pills · Accepted Answer · 2013-06-25 23:55:23Z

2

Use event delegation.

$("#fieldTable").on("click", "td", function () {

This should be all you have to change to get this to work correctly since the td are dynamically generated, but #fieldTable will always be there.

answered Jun 25, 2013 at 23:55

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrew Over a year ago

So it'll still reference the same $(this) object and everything?

Explosion Pills Over a year ago

@Andrew yes it will reference the td element

Collectives™ on Stack Overflow

Clicked handler for dynamically created buttons in jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related