使用表的td中的onclick调用jquery函数

Calling jquery function using onclick from td of table

本文关键字：onclick 调用 jquery 函数 中的 td      更新时间：2023-09-26

我正试图在点击第四个"td"时调用jQuery函数，如下所示。但它并没有调用函数，我尝试了不同的方法来从表中获取行。

<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>

下面是从"td"调用的JQuery函数。

// 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();
    });
});

有人能帮忙解决这里的问题吗？

我也试过下面的方法。

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

我认为问题来自这个

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

试试这个

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

尝试使用attr()，当ajax成功时重新加载页面：

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

您的代码运行良好，您的代码中有额外的"｝）；"标记可能会导致问题

$( "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>

你能试试这个吗？（只是为了确保它到达这个事件处理程序，以便我们可以确认错误是在事件绑定中还是以后）

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

此处有一个额外的});

$( "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
});

您的代码中有一个额外的});，这应该可以使用

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

尝试此代码

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