Вызов функции jquery с использованием onclick из td таблицы

Question

Я пытаюсь вызвать функцию jQuery после нажатия на четвертый 'td', как показано ниже. Но он не вызывает функцию, я пробовал разные способы получить строку из таблицы.

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

Ниже приведена функция JQuery, которая вызывается из «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(); 
    }); 

}); 

Может ли кто-нибудь помочь в решении этой проблемы?

Я попробовал метод ниже.

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

Answer 1

Попробуйте использовать 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 2

ваш код работает отлично у вас есть дополнительные "});" тег в коде может вызвать проблемы

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

Answer 3

Можете ли вы попробовать это? (Просто чтобы убедиться, что он достигает этого обработчика событий, так что мы можем подтвердить, если ошибка в случае связывания или позже)

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

Answer 4

я думаю, что проблема приходят из этого

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