CODEWITHSUNDEEP
javascripthtml
kane_004
kane_004

Reputation: 263

How to fix table row no being clicked after append function?

I am trying to create a new table row every time the associated button is clicked. However, once I click the button and I go to select the row, it does not get highlighted. I have an append function that passes a <tr> to the html. My end goal is to have the the new row that was appended become clickable and can be selected.

Code:

<div class="col-md-3 left-pane">
  <div class="row justify-content-md-center">
    <button class="btn btn-sm btn-block eNew">New Tier</button>
  </div>

  <hr>
  <table class="table table-sm table-hover tAdd">
    <tbody>
      <tr>
        <td>IIS</td>
        <td><button class="btn btn-sm btnD">Delete</button></td>
      </tr>
      <tr>
        <td>SQL</td>
        <td><button class="btn btn-sm btnD">Delete</button></td>
      </tr>
      <tr>
        <td>Windows File Share</td>
        <td><button class="btn btn-sm btnD">Delete</button></td>
      </tr>
      <tr>
        <td>Etc</td>
        <td><button class="btn btn-sm btnD">Delete</button></td>
      </tr>
    </tbody>
  </table>
</div>

Javascript:

     $(".eNew").on("click", function(event){

        $(".tAdd tbody").append(
          "<tr>" +
            "<td>New Selector</td>" +
            "<td><button class=\"btn btn-sm btnD\">Delete</button></td>" +
          "</tr>"
      );





    $(".tAdd tr").click(function() {
      $(".tAdd tr").removeAttr('class');
       $(this).toggleClass("table-active");
    });

Also, it works for the original <tr> that is in the html file but for some reason when I append a table row it does not work.

Upvotes: 0

Views: 307

Answers (1)

Martin
Martin

Reputation: 16423

This is entirely due to the fact that dynamic content is not bound using the event handler you have declared:

$(".eNew").on("click", function(event){

Although this will bind to all .eNew elements when the code first runs, new elements will not be bound.

Instead, bind to the document and specify .eNew as a selector for the click event and it will work:

$(document).on("click", ".eNew", function(event){

Edit following OP comment about not working

Just to verify that your code should now look like this:

$(document).on("click", ".eNew", function(event){
    $(".tAdd tbody").append(
        "<tr>" +
        "<td>New Selector</td>" +
        "<td><button class=\"btn btn-sm btnD\">Delete</button></td>" +
        "</tr>"
    );
});

$(document).on("click", ".tAdd tr", function(event){
    $(".tAdd tr").removeAttr('class');
        $(this).toggleClass("table-active");
});

Upvotes: 2

Related Questions