Получение значения из флажка, созданного из результатов $ .post

Question

У меня есть набор флажков, которые создаются из результата возврата $ .post. Эти флажки создаются каждый раз, когда другой человек выбирается из выпадающего списка, отображая разные люди для каждого.

$.post("api.php/atherapists", {clientID: clientID}).done(function(data){ 

    var data = JSON.parse(data); 

    var trHTML = ''; 

    $.each(data, function(i, item){ 
     therapistID = item.therapist_id; 
     therapistName = item.therapist_name; 

     trHTML += '<tr><td><input type="checkbox" name="achkbox" id="achkbox" value="' + therapistID + '"></td><td>' + therapistName + '</td></tr>'; 
    }); 
    $('#tableAvailable').empty(); 
    $('#tableAvailable').append(trHTML); 

}); 

Мой вопрос касается получения значения из флажка при его нажатии. Я планирую отключить функцию mysqli-запроса из $ .post, когда один из этих флажков щелкнут и отправит его значение в php для обработки. Каждый раз, когда я пытаюсь предупредить значение отмеченного флажка, ничего не происходит. Я пробовал каждый из них

$("input[name='achkbox']").change(function(){ 
    alert($(this).attr('value'));  
}); 

$('#achkbox').click(function(){ 
    alert($(this).attr('value'));   
}); 

$('#achkbox').change(function(){ 
    var id = $(this).val(); 
    if(id != null){ 
     alert(id); 
    } 
}); 

Ничто не возвращает или отображает значение, которое мне нужно отправить на php, чтобы обработать человека. Я могу понять, как отправить данные на php «на лету», я просто не могу понять, что я делаю неправильно с получением значения.

Edit - 2/23/2017 Я реализовал предложения Фермин, который красивы, но вот моя дилемма

$.post("api.php/atherapists", {clientID: clientID}).done(function(data){ 

    var data = JSON.parse(data); 

    var table = $('#tableAvailable'); 
    var trHTML = ''; 
    $('#tableAvailable').empty(); 

    $.each(data, function(i, item){ 
     therapistID = item.therapist_id; 
     therapistName = item.therapist_name; 

     var tr = $('<tr></tr>'); 
     var td1 = $('<td></td>'); 
     var td2 = $('<td></td>'); 
     var checkbox = $('<input type="checkbox" name="achkbox" id="achkbox" value="' + therapistID + '" >').click(function(){ 

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

      //fire ajax call to assign selected therapist to client 
      $.post("api.php/assignsave", {clientID: clientID, therapist: theraID}).done(function(data){ 

      //after assignment refresh the table by running $.post("api.php/atherapists) again 
      //maybe making this whole thing a function then recalling it after post 

      }); 


     }); 

    tr.append(td1.append(checkbox)).append(td2.append(therapistName)); 
    table.append(tr); 
    }); 


}); 

Редактировать 2/23/2017 9:55

Получил его, используя смесь решения Фермина и некоторые функции. Вот что я сделал

function getATherapists(clientID){ 
    $.post("api.php/atherapists", {clientID: clientID}).done(function(data){ 

     var data = JSON.parse(data); 

     var table = $('#tableAvailable'); 
     var trHTML = ''; 
     $('#tableAvailable').empty(); 

     $.each(data, function(i, item){ 
      therapistID = item.therapist_id; 
      therapistName = item.therapist_name; 

      var tr = $('<tr></tr>'); 
      var td1 = $('<td></td>'); 
      var td2 = $('<td></td>'); 
      var checkbox = $('<input type="checkbox" name="achkbox" id="achkbox" value="' + therapistID + '" >').click(function(){ 

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

      //assign therapist to client 
      $.post("api.php/assignsave", {clientID: clientID, therapist: theraID}).done(function(data){ 

       //call getATherapists function 
       getATherapists(clientID); 

       //create a new function to get current therapists since getCTherapists is further down the list 
       function getCurrentTherapists(clientID){ 
        $.post("api.php/ctherapists", {clientID: clientID}).done(function(data){ 

         var data = JSON.parse(data); 

         var table = $('#tableCurrent'); 
         var trHTML = ''; 
         $('#tableCurrent').empty(); 

         $.each(data, function(i, item){ 
          therapistID = item.therapist_id; 
          therapistName = item.therapist_name; 

          var tr = $('<tr></tr>'); 
          var td1 = $('<td></td>'); 
          var td2 = $('<td></td>'); 
          var checkbox = $('<input type="checkbox" name="cchkbox" id="cchkbox" value="' + therapistID + '" >').click(function(){ 

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

           //assign therapist to client 
           $.post("api.php/removesave", {clientID: clientID, therapist: theraID}).done(function(data){ 

            //rerun getCurrentTherapists & getATherapists       
            getCurrentTherapists(clientID); 
            getATherapists(clientID); 
           }); 
          }); 

          tr.append(td1.append(checkbox)).append(td2.append(therapistName)); 
          table.append(tr); 
            }); 


           }); 
           }; 
           getCurrentTherapists(clientID); 
          }); 


         }); 

         tr.append(td1.append(checkbox)).append(td2.append(therapistName)); 
         table.append(tr); 
        }); 


       }); 
       }; 

function getCTherapists(clientID){ 
        $.post("api.php/ctherapists", {clientID: clientID}).done(function(data){ 

        var data = JSON.parse(data); 

        var table = $('#tableCurrent'); 
        var trHTML = ''; 
        $('#tableCurrent').empty(); 

        $.each(data, function(i, item){ 
         therapistID = item.therapist_id; 
         therapistName = item.therapist_name; 

         var tr = $('<tr></tr>'); 
         var td1 = $('<td></td>'); 
         var td2 = $('<td></td>'); 
         var checkbox = $('<input type="checkbox" name="cchkbox" id="cchkbox" value="' + therapistID + '" >').click(function(){ 

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

          //assign therapist to client 
          $.post("api.php/removesave", {clientID: clientID, therapist: theraID}).done(function(data){ 

           //refresh the available table which would run $.post("api.php/atherapists) again 
           getCTherapists(clientID); 
           getATherapists(clientID); 
          }); 


         }); 

         tr.append(td1.append(checkbox)).append(td2.append(therapistName)); 
         table.append(tr); 
        }); 


       }); 
       }; 


       getATherapists(clientID); 
       getCTherapists(clientID); 

Answer 1

http://jsfiddle.net/

$(document).ready(function() { 
 
    var data = [ 
 
\t \t {therapist_id: 'id1', therapist_name: 'nam1'}, 
 
    {therapist_id: 'id2', therapist_name: 'nam2'}, 
 
    {therapist_id: 'id3', therapist_name: 'nam4'}, 
 
]; 
 
var table = $('#tableAvailable'); 
 
var trHTML = ''; 
 
    $.each(data, function(i, item){ 
 
     therapistID = item.therapist_id; 
 
     therapistName = item.therapist_name; 
 
     var tr = $('<tr></tr>'); 
 
     var td1 = $('<td></td>'); 
 
     var td2 = $('<td></td>'); 
 
\t \t \t var checkbox = $('<input type="checkbox" name="achkbox" id="achkbox" value="' + therapistID + '">').click(function(){ 
 
     \t console.log($(this).val()); 
 
     alert($(this).val()); 
 
     }); 
 
     tr.append(td1.append(checkbox)).append(td2.append(therapistName)); 
 
     table.append(tr); 
 
    }); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<table id="tableAvailable" > 
 
    
 
</table>

o2gxgz9r/3154/# & togetherjs = JtIhtUULoM

Попробуйте что-то вроде этого

var renderTable = function renderTable(data){ 
    var data = JSON.parse(data); 

     var table = $('#tableAvailable'); 
     var trHTML = ''; 
     table.empty(); 

     $.each(data, function(i, item){ 
      therapistID = item.therapist_id; 
      therapistName = item.therapist_name; 

      var tr = $('<tr></tr>'); 
      var td1 = $('<td></td>'); 
      var td2 = $('<td></td>'); 
      var checkbox = $('<input type="checkbox" name="achkbox" id="achkbox" value="' + therapistID + '" >').click(function(){ 

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

       //fire ajax call to assign selected therapist to client 
       $.post("api.php/assignsave", {clientID: clientID, therapist: theraID}).done(function(data){ 

       //after assignment refresh the table by running $.post("api.php/atherapists) again 
       //maybe making this whole thing a function then recalling it after post 
       renderTable(data); 
       }); 


      }); 

     tr.append(td1.append(checkbox)).append(td2.append(therapistName)); 
     table.append(tr); 
     }); 

}; 

$.post("api.php/atherapists", {clientID: clientID}).done(function(data){ 
     renderTable(data); 
    });