Функция jQuery click только активирует первый элемент

Question

Я строю систему управления билетами. Каждый билет имеет кнопки «Старт», «Пауза», «Завершить» и «Изменить». Кнопки генерируются с помощью PHP, который вытаскивает билеты из базы данных и прокручивает код для каждого билета. Вот PHP/HTML:

 foreach ($ticket as $print) { 
      echo '<div id="ticketDiv">'; 
      echo '<tr class="myTickets" id="' . $print->id . '" >'; 
        echo '<td id="myTickets_business_name_column">' . $print->business_name . '</td>'; 
        echo '<td id="myTickets_subject_column">' . $print->subject . '</td>'; 
        echo '<td id="myTickets_status_column">'; 
         if ($print->status == 'Begin'){ 
          echo 'Open'; 
         } 
         else { 
          echo $print->status; 
         } 
        echo '</td>'; 
      echo '</tr>'; 
      echo '<tr id="ticketButtons' . $print->id . '" class="ticketButtonsRow" style="display:none;">'; 
        echo '<td></td>'; 
        echo '<td>'; 
          echo '<div class="ticketButtons">'; 
           if ($print->status == 'Paused') 
           { 
            echo '<button value="' . $print->id . '" class="StartButton">Start</button>'; 
           } 
           elseif ($print->status == 'Open' or 'Begin') 
           { 
             echo '<button value="' . $print->id . '" class="PauseButton">Pause</button>'; 
           } 
           echo '<button value="' . $print->id . '" class="CompleteButton">Complete</button>'; 
           echo '<a href="' . site_url('edit-ticket') . '?id=' . $print->id . '"><button id="editButton" value="' . $print->id . '" class="EditButton">Edit</button></a>'; 
          echo '</div>'; 
        echo '</td>'; 
        echo '<td></td>'; 
      echo '</tr>'; 
     } 

Для каждого билета у них есть уникальный идентификатор, который создается из базы данных. Каждая кнопка имеет значение уникального идентификатора для этого билета. Когда вы нажимаете любую из кнопок («Пуск», «Пауза» и т. Д.), JQuery затем переходит к обновлению базы данных. Он принимает значение кнопки и передает ее вместе с формой отправки, которая затем запускает запрос для обновления базы данных.

Проблема, с которой я столкнулась, заключается в том, что в списке с одинаковым статусом (с открытием или приостановкой) есть несколько билетов, и вы нажимаете кнопку «Старт/Пауза» для любого из нижележащих билетов, ID первого билета, а не тот, который вы нажали.

Вот мой JQuery для запуска и паузы:

/* 
** Ticket updating buttons 
*/ 
$(document).ready(function($){ 
    /* Toggles ticket buttons for each ticket */ 
    $(".myTickets").click(function() { 
     var ticket_id = $(this).attr('id'); 
     $('.ticketButtonsRow').hide(); 
     $(this).next('#ticketButtons' + ticket_id).slideToggle(100); 
    }); 

    /* When the start button is clicked - the following below is executed */ 
    $(".StartButton").click(function(e) { 

     /* Pulls ticket ID from button clicked */ 
     var ticket_id = $(".StartButton").val(); 

     /* Hides the ticket buttons on click */ 
     $('#ticketButtons' + ticket_id).hide(100); 

     /* Places data into an array */ 
     var dataString = 'start=' + ticket_id; 

     /* Enables data logging in the console */ 
     console.log(dataString); 

     /* Where the magic happens */ 
     $.ajax({ 
       type: "POST", 
       url: 'submit-data', 
       data: dataString, 
       cache: false, 
       success: function(data) 
       { 
        /* Reloads the page after success */ 
        location.reload(); 

       } 
      }); 
    }); 

/* When the pause button is clicked - the following below is executed */ 
$(".PauseButton").on('click', function(e) { 
    console.log($(this).text()); 
    var ticket_id = $(".PauseButton").val(); 

    /* Hides the ticket buttons on click */ 
    $('#ticketButtons' + ticket_id).hide(100); 

    /* Shows the note form */ 
    $("#addNoteFormDiv").show(200); 

    /* When cancel button is clicked close notes and cancel pause action */ 
    $("#notesCancelButton").click(function() { 
     $("#addNoteFormDiv").hide(200); 
    }); 

    /* After notes has been added and submit button clicked */ 
    $("#notesDoneButton").click(function(e) { 

     $("#addNoteFormDiv").hide(200); 

     var notes = $("#addNotes").val(); 
     var employee_id = $("#notes_employee_id").val(); 

     /* Places data into an array */ 
     var dataString = 'pause=' + ticket_id + '&notes=' + notes + '&employee_id=' + employee_id; 

     /* Enables data logging in the console */ 
     console.log(dataString); 

     /* Where the magic happens */ 
     $.ajax({ 
       type: "POST", 
       url: 'submit-data', 
       data: dataString, 
       cache: false, 
       success: function(data) 
       { 
        /* Reloads the page after success */ 
        document.getElementById("addNoteForm").reset(); 
        //location.reload(); 
       } 
      }); 

     /* Prents the execuation of the actual submit of the form */ 
     e.preventDefault(); 
    }); 
}); 
return false; 

Кроме того, вы увидите код там для slideToggle. Это касается скрытия и отображения кнопок при нажатии на билет.

Answer 1

У вас есть несколько экземпляров кода, который выбирает значение первой кнопки вместо нажатой кнопки.

Изменить

/* Pulls ticket ID from button clicked */ 
var ticket_id = $(".StartButton").val(); 

Для

/* Pulls ticket ID from button clicked */ 
var ticket_id = $(this).val(); 

Answer 2

Во-первых, вы можете быть настройки ваши условия неправильно:

$print->status == 'Open' or 'Begin' всегда возвращает истину - вы оценке, если $print->status == 'Open' правильно, но если это не удается, ключевое слово or не подходит для тестирования одной и той же переменной. Вы можете искать

if ($print->status == 'Open' or $print->status == 'Begin')

Как для JQuery, это выглядит, как вы захватывая настройки Try ticket_id из

var ticket_id = $(".StartButton").val();

и

var ticket_id = $(".PauseButton").val();

оба из них -

var ticket_id = $(this).val();

и посмотреть, устраняется ли эта проблема.

Answer 3

Я не знаю, если это может помочь, но переход от

$(".myTickets").click(function() { 
    var ticket_id = $(this).attr('id'); 
}); 

к чему-то вроде этого:

$("*.myTickets").click(function() { 
    var ticket_id = $(this).attr('id'); 
}); 

НЕ ЗАБУДЬТЕ ПОСТАВИТЬ Звездочка