Ajouter une ligne à la table et envoyer au serveur, publier la table via jquery à php

J'essaie de faire une table où je peux ajouter une nouvelle ligne avec un clic de bouton, puis envoyer la table au serveur afin qu'elle se souvienne des informations sur la mise à jour de la page. Voici un bouton qui ajoute avec succès une ligne à une table avec l'heure actuelle. Cependant, lorsque j'envoie la table au serveur via le bouton "Envoyer au serveur", il ne reflète pas le tableau mis à jour, seul l'original. Ce serait un tel soulagement de le faire comprendre.

HTML:

<input type = "button" id = "send" value = "Send to Server" /> <input type = "button" id = "add" value = "Add Row" /> <table class="table table-striped"> <tr> <td><h2>In</h2></td> <td><h2>Out</h2></td> <td><h2>Total</h2></td> </tr> <tr> <td>InData</td> <td>OutData</td> <td>TotalData</td> </tr> </table>

JS:

 <script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script> <script language="javascript" type="text/javascript"> $("#add").click(function(){ var dt = new Date(); var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); //set variable to current time $('table > tbody:last').append('<tr><td>'+time+'</td><td></td><td></td></tr>'); //add row to table with current time }); $(function(){ var dataArr = []; $("table").each(function(){ dataArr.push($(this).html()); }); $('#send').click(function(){ $.ajax({ type : "POST", url : 'timesheet.php', data : "content="+dataArr, success: function(data) { alert(data);// alert the data from the server }, error : function() { } }); }); }); </script

PHP (timesheet.php):

 <?php echo $_REQUEST['content']; ?>

Lorsque j'envoie la table au serveur via le bouton "Envoyer au serveur", il ne reflète pas la table mise à jour, seule l'original.

Solution

Utilisez .on() au lieu de .click()

 <script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script> <script language="javascript" type="text/javascript"> $(document).on('click', '#add', function(){ var dt = new Date(); var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds(); //set variable to current time $('table > tbody:last').append('<tr><td>'+time+'</td><td></td><td></td></tr>'); //add row to table with current time }); $(document).on('click', '#send', function(){ var dataArr = []; $("table").each(function(){ dataArr.push($(this).html()); }); $('#send').click(function(){ $.ajax({ type : "POST", url : 'timesheet.php', data : "content="+dataArr, success: function(data) { alert(data);// alert the data from the server }, error : function() { } }); }); }); </script>

Édité:

La liaison de click() que vous utilisez est appelée une liaison "directe" qui n'attache que le gestionnaire aux éléments qui existent déjà . Il ne sera pas lié aux éléments créés à l'avenir. Pour ce faire, vous devrez créer une liaison "déléguée" en utilisant on() .

À partir de la documentation de .on() :

Les événements délégués ont l'avantage de pouvoir traiter des événements à partir d'éléments descendants qui sont ajoutés au document ultérieurement.