CODEWITHSUNDEEP
javascriptjquerydatatable
user2782405
user2782405

Reputation: 393

How to activate click option on a table-responsive column in innerHTML

I have a page where I set the dataTable content in the div using the following code:

$('#' + divid + '-data')[0].innerHTML = data.TableContent;

I get the table content from a different method. Here is my TableContent:

<table class="table-responsive dataTable table-striped" id="51">
   <tr>
      <td class="details-control"></td>
      <td>Hi</td>
   </tr>
</table>

On the page, when I tried to display an alert message on click on table-responsive column, nothing happens.

$("td.details-control").on("click", function(e) {
   alert("hi");
});

I also tried:

document.getElementById("#table-51").on("click", "tr td.details-control", function () {
                alert("hi");
            });

Please help and thanks in advance.

Upvotes: 0

Views: 200

Answers (3)

davidkonrad
davidkonrad

Reputation: 85598

You seem to overcomplicate this issue; keep it simple! You miss something to click on (empty <td>) and the use of a native DOM method along with a jQuery delegated event handler will never work.

var data = { TableContent: `<table class="table-responsive dataTable table-striped" id="51">
   <tr>
      <td class="details-control">click me</td>
      <td>Hi</td>
   </tr>
</table>`
}

$('#sample')[0].innerHTML = data.TableContent;

$('#sample').on('click', 'td.details-control', function(e) {
   alert("hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample"></div>

Upvotes: 0

Hack Dawg
Hack Dawg

Reputation: 108

try this

   <table class="table-responsive dataTable table-striped" id="51">
       <tr>
      <td class="details-control"></td>
      <td onclick="alert('hi')">Hi</td>
   </tr>
</table>

Upvotes: 0

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27242

Try this :

$("td.details-control").click(function(){
  alert("Hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-responsive dataTable table-striped" id="51">
   <tr>
      <td class="details-control">Show alert</td>
      <td>Hi</td>
   </tr>
</table>

Upvotes: 1

Related Questions