Calling jquery function using onclick from td of table

Question

I am trying to call a jQuery function upon clicking on the 4th 'td' as below. But it is not calling the function, I have tried different ways to get the row from the table.

<table class='logtable'>
        <thead>
            <tr>
                <th>Time</th>
                <th>Name</th>
                <th>Log Note</th>
            </tr>
        </thead>
        <tbody>
            <?foreach ( $logRows as $logRow ){?>
            <tr class="logtr">
                <td><?=readable_date($logRow['date_created'])?></td>
                <td><?=$logRow['first_name']></td>
                <td><?=$logRow['log_note']?></td>
                <td class="js-delete-log"  data-log-id=<?=$logRow['log_id']?>><span class="delete"> <i class="fa fa-times"></i></span></td>

            </tr>
            <?}?>
        </tbody>
    </table>

Below is the JQuery function which is called from the 'td'.

// jQuery function to delete the log

$( "body" ).on( "click", ".js-delete-log", function(event) {
        var el = $(this);
        var log_id = el.data('log-id');

              $.post( "../ajax/delete_logs.php", {log_id:log_id,action:'delete_log'} )                         
              location.reload();
    });

});

Can anyone please help on what's the issue here?

I tried the below method also.

//   $("table.logtable tr.logtr td.js-delete-log").click(function() {

have you checked your code "<td><?=$logRow['first_name']></td>" you have missed the "?>" — UnmeshD
– UnmeshD, Commented Dec 11, 2015 at 6:44
just do a simple form if you are reloading the page no need for ajax — madalinivascu
– madalinivascu, Commented Dec 11, 2015 at 6:44
can you please check using alert that you have data-log-id in valid form that you want or not? — Aatman
– Aatman, Commented Dec 11, 2015 at 6:46

Abdul Kohar · Accepted Answer · 2015-12-11 06:46:33Z

1

i think the problem come from this

 <td class="js-delete-log"  data-log-id=<?=$logRow['log_id']?>>

Try this one

<td class="js-delete-log"  data-log-id=<?php echo $logRow['log_id'] ?>>

answered Dec 11, 2015 at 6:46

Abdul Kohar

3710 bronze badges

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

1 Comment

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ Over a year ago

That's correct, but we can't say he is wrong here until we know his version.

madalinivascu · Accepted Answer · 2015-12-11 06:42:31Z

0

Try using attr() , reload the page when ajax is successful:

var log_id = el.attr('data-log-id');
$.post( "../ajax/delete_logs.php", {log_id:log_id,action:'delete_log'},function(data){
location.reload();
});

edited Dec 11, 2015 at 6:42

answered Dec 11, 2015 at 6:40

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

1 Comment

Tariq Husain Over a year ago

why to use attr if jquery provide .data()

Shailendra Sharma · Accepted Answer · 2015-12-11 06:42:49Z

your code working fine you have extra "});" tag in your code may cause of problem

$( "body" ).on( "click", ".js-delete-log", function(event) {
        var el = $(this);
        var log_id = el.data('log-id');
        alert(log_id)

//              $.post( "../ajax/delete_logs.php", {log_id:log_id,action:'delete_log'} )                         
  //            location.reload();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class='logtable'>
        <thead>
            <tr>
                <th>Time</th>
                <th>Name</th>
                <th>Log Note</th>
            </tr>
        </thead>
        <tbody>
            
            <tr class="logtr">
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td class="js-delete-log" data-log-id='50' >  4</td>

            </tr>
          
        </tbody>
    </table>

gurvinder372 · Accepted Answer · 2015-12-11 06:42:52Z

0

Can you try this? (just to ensure that it reaches this event handler so that we can confirm if the error is in event binding or later)

$( document.body ).on( "click", ".js-delete-log", function(event) {
        alert("clicked");
});

answered Dec 11, 2015 at 6:42

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

1 Comment

gurvinder372 Over a year ago

@Wings2fly if this is not working then the issue in rendering of td as A-Kohar has pointed out. Check your browser's dev-tools to ensure that your td looks like how you want it to be. Hopefully this helped.

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ · Accepted Answer · 2015-12-11 06:46:47Z

0

You have an extra }); here

$( "body" ).on( "click", ".js-delete-log", function(event) {
    var el = $(this);
    var log_id = el.data('log-id');

          $.post( "../ajax/delete_logs.php", {log_id:log_id,action:'delete_log'} ); //You missed the semicolon here but it's not creating the issue                        
          location.reload();
    //}); Remove this line

});

answered Dec 11, 2015 at 6:46

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

4,2261 gold badge28 silver badges55 bronze badges

Comments

user3239866 · Accepted Answer · 2015-12-11 06:51:09Z

0

There is a extra }); in your code, this should work

$(function(){
    $( "body" ).on( "click", ".js-delete-log", function(event) {
       // your code here....
    });

});

answered Dec 11, 2015 at 6:51

user3239866

668 bronze badges

Comments

UnmeshD · Accepted Answer · 2015-12-11 06:55:31Z

0

try this code

$(document).on( "click", ".js-delete-log .delete", function(e) {
    var el = $(this);
    var log_id = el.parent().data('log-id');
    alert(log_id);             
});

answered Dec 11, 2015 at 6:55

UnmeshD

1592 silver badges12 bronze badges

Collectives™ on Stack Overflow

Calling jquery function using onclick from td of table

7 Answers 7

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related