Question

我试图在点击第4个'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() {

Answer 1

我认为问题来自于此

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

试试这个

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

Answer 2

尝试使用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();
});

Answer 3

你的代码工作正常你有额外的＆＃34;}）;＆＃34;代码中的标记可能导致问题

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

Answer 5

这里有额外的});

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

});

Answer 6

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

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

});

Answer 7

试试这段代码

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

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

7 个答案: