PHP OnClick Возвращение не определено

Question

У меня есть цикл while для создания таблицы данных и щелчка мышью. Я хочу вызвать функцию, но когда я вызываю функцию, она не получает информацию от передаваемого щелчка мышью.

HTML:

echo "<td width='25%' align='center'><a href='javascript:void(0)' id='{$row['id']}' class='{$row['status']}' onclick='hello()'> {$row['status']} </a></td>";

JS:

//onclick function
function hello()
{
   // Get the ID of the button that was clicked on
   var id_of_status_to_update = $(this).attr("id");
   var status_to_be_updated = $(this).attr("class");
   var varData = 'id=' + id_of_status_to_update + '&UserStatus=' + 
   status_to_be_updated;
   console.log(varData);

   // Make an AJAX request
   $.ajax({
      url: "php/processor.php", //This is the page where you will handle your SQL insert
      type: "POST",
      data: varData, //The data your sending to processor.php
      async: false, 
      success: function(){
          // location.reload();
          alert("Hello Function");
      },
      error: function(){
          alert("There was a problem, please try again or contact the admin for assistance.");
      }   
    });
};

но когда я проверяю журнал консоли, я вижу, что id и userstatus не определены, вместо того, что должно быть переданными атрибутами id и class. Любая помощь? Я знаю, что функция вызывается правильно, потому что я получаю предупреждение об успехе.

Answer 1

Чтобы исправить вашу неопределенную проблему, удалите древний метод onclick и используйте правильный обработчик событий jquery .click, и тогда ваше использование $(this) будет работать правильно.

Сначала настройте HTML-сборку следующим образом:

echo "<td width='25%' align='center'><a href='#' id='{$row['id']}' class='clicker {$row['status']}'> {$row['status']} </a></td>";

Затем настройте javascript так:

$(document).ready(function() {
    $(".clicker").click(function(e){
        e.preventDefault(); // new line to stop the anchor click default behavior
        var id_of_status_to_update = $(this).attr("id");
        var status_to_be_updated = $(this).attr("class");
        // ... the rest you had is fine as is ...
    });
});

Это прикрепляет обработчик события click к классу, если "clicker", поэтому он применяется ко всем кнопкам с этим классом.

Answer 2

потому что this внутренняя функция hello указывает на объект window. Вы можете передать параметр event в функцию hello, например onclick="hello(event)", и внутри этой функции вы можете использовать event.target.getAttribute('id') для доступа к идентификатору этого элемента, не забудьте изменить определение функции function hello(){...} на function hello(event){...}

Answer 3

Используйте это вместо:

$('#id').on('click', function(){
//Do something
//console.log(this)
})

Конечно, вам нужно передать элементу фиксированный идентификатор, или вы можете использовать $ ('. Class') и передать ему класс вместо этого!