CODEWITHSUNDEEP
javascriptjqueryhtml
ihappyk
ihappyk

Reputation: 555

Bindings Events dynamically to Table rows & Columns

I am trying to apply click event on only second column & click event on the third column's button, but event is not triggering.

html:

<table class="table table-bordered table-hover">
      <tr>
        <td class="webIcon">
        <img src="Img/icon.png"></img>
        </td>
        <td class="tabTitle tabRow">Smith</td> 
        <td class="closeTab">
            <button type="button" class="btn btn-default btn-sm " aria-label="Left Align">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </button>
        </td>
      </tr>
</table>

jquery:

 $( '.table tr:nth-child(2)').delegate("td","click",function(){
            $('.tabRow').click(function(){
                var id = $(this).parents('tr').attr('id');
                console.log(id);
            });
        });

  $( '.table tr:nth-child(3)').delegate("td","click",function(){
            $('.button').click(function(){
                var id = $(this).parents('tr').attr('id');
                console.log(id);
            });
        });

Upvotes: 1

Views: 1134

Answers (3)

Dipak
Dipak

Reputation: 12190

Your code is more complex. Try this 

$( '.table .tabTitle').on("click",function(){            
    var id = $(this).parents('tr').attr('id');
    console.log(id);            
});

$( '.table .btn').on("click",function(){           
    var id = $(this).parents('tr').attr('id');
    console.log(id);
});


$('.table .tabTitle').on("click", function() {

  var id = $(this).parents('tr').attr('id');
  console.log(id);

});

$('.table .btn').on("click", function() {

  var id = $(this).parents('tr').attr('id');
  console.log(id);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered table-hover">
  <tr id="ID1">
    <td class="webIcon">
      <img src="Img/icon.png"></img>
    </td>
    <td class="tabTitle tabRow">Smith</td>
    <td class="closeTab">
      <button class="btn btn-default btn-sm " aria-label="Left Align">Button
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
      </button>
    </td>
  </tr>
</table>

Edit:

  • Avoid nth-child(n) selectors if you can because that affects the load performance of your page.

Upvotes: 5

A. Wolff
A. Wolff

Reputation: 74420

You should delegate event to closest static parent container. For example, if .table element(s) is/are static and available in DOM at time you are binding events:

$('.table').delegate("tr .tabRow, tr .btn","click",function(){
     var id = $(this).closest('tr').attr('id');
     console.log(id);
});

Be aware:

As of jQuery 1.7, .delegate() has been superseded by the .on() method. For earlier versions, however, it remains the most effective means to use event delegation. More information on event binding and delegation is in the .on() method. In general, these are the equivalent templates for the two methods:

// jQuery 1.4.3+
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7+
$( elements ).on( events, selector, data, handler );

Upvotes: 0

acontell
acontell

Reputation: 6932

delegate has been superseded by the .on() method (more info about it here) so I'm going to use "on" instead of "delegate" (hope you don't mind).

Following your code style, you could try something like:

$('.table').on("click", "tr td:nth-child(3)", function () {
    $(this).find("button").off('click').on('click', function() {// Remove the click event firstly or you'll end up with a pile of them
        var id = $(this).parents('tr').attr('id');
        console.log(id);
    });
});

I'd do it this way though:

$('.table').on("click", "tr td:nth-child(3) button", function () {
    //$(this).find("button").off('click').on('click', function() {
        var id = $(this).parents('tr').attr('id');
        console.log(id);
    //});
});

Upvotes: 0

Related Questions