Why Bootstrap button is not clickable after append HTML?

Question

HTML;

<div class="col-lg-9" style="background-color:#ffffff; z-index:-1;">
    <h2 id="titleH2"></h2>
    <div class="table-responsive">
        <table class="table table-striped" id="tableId">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Word</th>
                    <th>Meaning</th>
                    <th>Type</th>
                </tr>
            </thead>
            <tbody id="tbodyId">
            </tbody>
        </table>
    </div>
</div>

javascript; (Data is displayed when the page is loaded.)

window.onload = function(){
    showAllWords();
}

function showAllWords(){
    $.ajax({
        url: "${pageContext.request.contextPath}/myWords/allWords",
        type: "GET",
        async:false,
        success: function(data) {
            $('#tbodyId').empty();
            var trHTML = '';
            var index = 1;
            $.each(data, function() {
                trHTML += "<tr>";
                $.each(this, function(k, v) {
                    if(k == "idWord"){
                        trHTML += "<td>" + index + "</td>";
                        index++;
                    }
                    else{
                        trHTML += "<td>" + v + "</td>";
                    }
                });
                trHTML += "<td>";
                trHTML += "<input type=\"submit\" class=\"btn btn-primary\" value=\"Delete\">";
                trHTML += "</td>";
            });
            $('#tbodyId').append(trHTML);
        }
    });
}

Output:

I can't click 'Delete buttons' after append HTML. So, buttons are not clickable. How can I fix this problem or what should I change?

There's no event handler posted, but it's probably not delegated, and you replace the elements every time, removing the event handlers, so you need delegated event handlers. — adeneo
– adeneo, Commented May 13, 2017 at 17:37

Community · Accepted Answer · 2020-06-20 09:12:55Z

You have z-index:-1 that will cause it to unclickable (unless all your other element is -2). Set it to 0 should fix it.

The z-index property specifies the stack order of an element.

An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

window.onload = function() {
  showAllWords();
}

function showAllWords() {
  $.ajax({
    url: "${pageContext.request.contextPath}/myWords/allWords",
    type: "GET",
    async: false,
    success: function(data) {
      $('#tbodyId').empty();
      var trHTML = '';
      var index = 1;
      $.each(data, function() {
        trHTML += "<tr>";
        $.each(this, function(k, v) {
          if (k == "idWord") {
            trHTML += "<td>" + index + "</td>";
            index++;
          } else {
            trHTML += "<td>" + v + "</td>";
          }
        });
        trHTML += "<td>";
        trHTML += "<input type=\"submit\" class=\"btn btn-primary\" value=\"Delete\">";
        trHTML += "</td>";
      });
      $('#tbodyId').append(trHTML);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-lg-9" style="background-color:#ffffff; z-index:0;">
  <h2 id="titleH2"></h2>
  <div class="table-responsive">
    <table class="table table-striped" id="tableId">
      <thead>
        <tr>
          <th>#</th>
          <th>Word</th>
          <th>Meaning</th>
          <th>Type</th>
        </tr>
        <tr>
          <td>
            111
          </td>
          <td>
            222
          </td>
          <td>
            333
          </td>
          <td>
            <input type="submit" class="btn btn-primary" value="Delete">
          </td>
        </tr>
      </thead>
      <tbody id="tbodyId">
      </tbody>
    </table>
  </div>
</div>

Collectives™ on Stack Overflow

Why Bootstrap button is not clickable after append HTML?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related