Submit buttons stop working after second function call

Question

/* edit */ changed the id of the submit edit and submit transfer buttons because the id was duplicated.

I am writing a script that draws a table from MySQL data and gives the user the ability to edit/delete/transfer said data. On the initial page load, everything works. However, when I select a new table, the transfer and edit buttons cease to function. This is the case even if I select the outgoing table (the table that initially loads). So, the problem occurs somewhere after the page reloads, I just have no idea where. Every button besides the transfer and edit buttons work.

Here's a screen cap of the script so you can get an idea of what I'm trying to do.

And here is my code:

<?php
require("IRCinventoryfunctions.php");
require_once 'IRCinventoryconfig.php';

$aTable = file_get_contents('php://input');
$aTable = substr($aTable, 6);

$connection = new mysqli($db_hostname, $db_username, $db_password, $db_database, $db_port);
    if ($connection->connect_error) die($connection->connect_error);
    global $connection;

$result = $connection->query("SHOW TABLES");

$table = array();
    while ($row = $result->fetch_row()){
    $table[] = $row[0];
    }
$count = count($table);
?>

<div id="content">

<?php
$thatTable = !empty($aTable) ? $aTable : "OUTGOING";
    {
session_start();
$_SESSION['thatTable'] = $thatTable;
global $thatTable;  

$queryColumns  = "SHOW COLUMNS FROM $thatTable";
$resultColumns = $connection->query($queryColumns);
    if (!$resultColumns) die ("Database access failed: " . $connection->error);
global $resultColumns;

$queryRows  = "SELECT * FROM $thatTable";
    $resultRows = $connection->query($queryRows);
    if (!$resultRows) die ("Database access failed: " . $connection->error);
global $resultRows;

$rows = $resultRows->num_rows;
global $rows;

global $connection;

drawTable();

$connection->close();
} 
?>

Here's the draw table function:

function drawTable() {

global $connection;
global $resultColumns;
global $resultRows;
global $rows;
global $columns;
global $countColumnsGlobal;
global $thatTable;

$columns = array();
    while ($column = $resultColumns->fetch_row()){
        $columns[] = $column[0];
     }

echo "<div id=\"table\"><table class=\"CSSTableGenerator\" >\n";

$countColumns = count($columns);
$countColumnsGlobal = $countColumns;

$insertColumns = array();
for ($pointer = 1 ; $pointer < $countColumns ; ++$pointer) {
    $insertColumns[] = $columns[$pointer];
    }

for ($pointer = 1 ; $pointer < $countColumns ; ++$pointer) {
    echo "<th scope=\"col\" bgcolor=\"#efefef\">";
    echo $columns[$pointer];
    echo "</th>";
    }
    echo "<th>ACTIONS</td>";

for ($j = 0 ; $j < $rows ; ++$j)
    {
        $resultRows->data_seek($j);
        $row = $resultRows->fetch_array(MYSQLI_NUM);

        $countRows = count($row);

        echo "<tr>";
        for ($pointer = 1 ; $pointer < $countRows ; ++$pointer) {
            echo "<td>";
            echo $row[$pointer];
            echo "</td>";
        }

        global $I_ID;
            echo "<td>";
                echo "<form name=\"deleteRow\" action=\"http://localhost:8888/IRC/IRCprocessinventory.php\" method=\"POST\">";
                $I_ID = $row[0];
                echo "<input type=\"hidden\" value=\"delete\" name=\"delete\">";
                echo "<input type=\"hidden\" value=\"$thatTable\" name=\"thatTable\">";
                echo "<input type=\"hidden\" value=\"$I_ID\" name=\"I_ID\">";
                echo "<input type=\"submit\" value=\"delete\">";
                echo "</form>";
                echo "<div id=\"edit\"><input type=\"button\" name=\"$I_ID\" value=\"edit\"></div>";
                echo "<div id=\"transfer\"><input type=\"button\" name=\"$I_ID\" value=\"transfer\"></div>";
            echo "</td>";
        echo "</tr>";

        echo "<tr id=\"$I_ID\" class=\"edit\">";
        echo "<form name=\"editRow\" action=\"IRCprocessinventory.php\" method=\"POST\">";
            echo "<input type=\"hidden\" name=\"edit\">";
            echo "<input type=\"hidden\" name=\"$thatTable\">";
            echo "<input type=\"hidden\" value=\"$I_ID\" name=\"I_ID\">";
            echo "<input type=\"hidden\" value=\"$row[1]\" name=\"$columns[1]\">";
            echo "<td>$row[1]</td>";
            for ($pointer = 2 ; $pointer < $countRows ; ++$pointer) {
                echo "<td>";
                echo "<input type=\"text\" value=\"$row[$pointer]\" name=\"$columns[$pointer]\">";
                echo "</td>";
            }
            echo "<td><input type=\"submit\" id=\"submitEdit\" class=\"submitEdit\" name=\"$I_ID\" value=\"submit edit\"></td>";
        echo "</form>";
        echo "</tr>";

        echo "<tr id=\"transfer\" class=\"$I_ID\">";
        echo "<form name=\"transfer\" action=\"IRCprocessinventory.php\" method=\"POST\">";
            echo "<input type=\"hidden\" name=\"transfer\">";
            echo "<input type=\"hidden\" name=\"$thatTable\">";
            echo "<input type=\"hidden\" value=\"$I_ID\" name=\"I_ID\">";
            echo "<td>Transfer to OUTGOING</td>";
            echo "<td>$row[2]</td>";
            echo "<td><input type=\"text\" name=\"amountTransferred\"></td>";
            for ($pointer = 5 ; $pointer < $countRows + 1 ; ++$pointer) {
                echo "<td></td>";
            }
            for ($pointer = 0 ; $pointer < $countRows + 1 ; ++$pointer) {
                echo "<input type=\"hidden\" name=\"$row[$pointer]\" value=\"$columns[$pointer]\">";
            }
            echo "<td><input type=\"submit\" id=\"submitTransfer\" class=\"submitTransfer\" name=\"$I_ID\" value=\"transfer items\"></td>";
        echo "</form>";
        echo "</tr>";
    }
echo "</table></div>"; //end table, end content
}

Here's the full script if you really need to see it.

<!DOCTYPE html>
<script src="../_js/jquery.min.js"></script>
<script src="../_js/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
/* AJAX for table selection */
    $('#values').change(function() {
        var switchTable = $(this);
    $.ajax({
        type: 'POST', 
        url: "IRCdrawTables.php",
        data: switchTable,
        cache: false,
        success: function(result){
            $('#IRCdrawTables').html(result);
        } //end result
    }); // end ajax 
    return false;
    }); // .change  

/* jQuery for edit and transfer panels */
    var editRows = document.querySelectorAll('tr.edit');
    var edit = $('#edit');
    $(function() {
        $(editRows).hide();
    });
    $('input[type=button][value=edit]').on('click', function() {
        var id = $(this).attr('name');
        thisRow = '#' + id;
        $(thisRow).fadeToggle();
    }); 
    var transferRows = document.querySelectorAll('tr#transfer');
    var transfer = $('#transfer');
    $(function() {
        $(transferRows).hide();
    });
    $('input[type=button][value=transfer]').on('click', function() {
        var id = $(this).attr('name');
        thisRow = '.' + id;
        $(thisRow).fadeToggle();
    }); 
}); //end ready
</script>
<style>
#table {
    margin-top:2px;
    }

#formTable {
    width:100%;
    margin:0px;padding:0px;
    border:1px solid #000000;
    border-bottom:none;
    border-left:none;
    border-right:none;
    }

#formTable td{
    vertical-align:middle;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    width:100px;
    font-size:14px;
    font-family:arial;
    font-weight:normal;
    color:#000000;
    }

#formTable input[type="text"]{
    width:95%;
    }

.CSSTableGenerator {
    margin:0px;padding:0px;
    width:100%; 
    border:1px solid #000000;
    border-top:none;
    border-right:none;
    border-left:none;
    }

.CSSTableGenerator table{
    width:100%;
    height:100%;
    margin:0px;padding:0px;
    }

.CSSTableGenerator tr:nth-child(odd){ background-color:#e5e5e5; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }

.CSSTableGenerator th{
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    width:100px;
    }

.CSSTableGenerator td{
    vertical-align:middle;
    border:1px solid #000000;
    border-width:0px 1px 1px 0px;
    text-align:left;
    padding:7px;
    width:100px;
    font-size:14px;
    font-family:arial;
    font-weight:normal;
    color:#000000;
    }

.CSSTableGenerator tr:last-child td{
    border-width:0px 1px 0px 0px;
    }

.CSSTableGenerator tr td:last-child{
    border-width:0px 0px 1px 0px;
    }

.CSSTableGenerator tr:last-child td:last-child{
    border-width:0px 0px 0px 0px;
    }

.CSSTableGenerator tr:first-child td{
    background:-o-linear-gradient(bottom, #cccccc 5%, #b2b2b2 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #cccccc), color-stop(1, #b2b2b2) );    background:-moz-linear-gradient( center top, #cccccc 5%, #b2b2b2 100% );    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#cccccc", endColorstr="#b2b2b2");  background: -o-linear-gradient(top,#cccccc,b2b2b2);
    background-color:#cccccc;
    border:0px solid #000000;
    text-align:center;
    border-width:0px 0px 1px 1px;
    font-size:14px;
    font-family:arial;
    font-weight:bold;
    color:#000000;
    margin-top:-2px;
    }


    #header {
        position:absolute;
        background-image: url("../_images/InventoryHeader1.jpg");
        background-position:left top;
        background-repeat: no-repeat;
        top:0px;
        left:6px;
        height:163px;
        width:700px;
    }

    #header2 {
        position:absolute;
        background-image: url("../_images/HeaderBar.jpg");
        background-position:left top;
        top:0px;
        right:6px;
        left:6px;
        height:163px;
        z-index: -1;
    }

    .menu {
        color:black; font-size:12pt; font-family:arial,sans-serif; 
        font-weight:bold
    }

    #menu {
        position:absolute;
        top:174px;
        left:6px;
        right:6px;
        height:40px;
        background-color:#eceeef;
        background-position:left;
        border:1px solid black;
    }

    #menu table {
        position:absolute;
        top:7px;
        background-color:#eceeef;
    }
    #menu td {
        background-color:#eceeef;
    }

    #border {
         position:absolute;
         background:#ECEEEF;
         left:7px;
         height:3px;
         width:104px;
         top:438px;
         z-index:4;
    }

    #contentHeader {
        position:absolute;
        height:40px;
        left:325px;
        right:6px;
        top:230px;
        background-color: #c6ccd1;
        background-position:right;
        border:1px solid black;
    }

    #content {
        position:absolute;
        top:270px;
        left:325px;
        right:6px;
        bottom:95px;
        background-color: #eceeef;
        background-position:right;
        border:1px solid black;
        border-top:none;
        z-index: -1;
        overflow-x: auto;
    }
    #IRCdrawTables {
    width:100%;
    }
    #alignSelect {
        position:absolute;
        width:250px;
        right:0px;
        top:0px;
    }
    #tableNameContainer {
        position:absolute;
        background-color:#EFEFEF;
        border-right: 1px black solid;
        height:40px;
        text-align:center;
        right:86%;
        left:0px;
    }

    #tableName {
        position:absolute;
        text-align:center;
        margin-top:10px;
        width:100%;
        z-index:1;
    }

</style>
<body>
<div id="IRCdrawTables">
<?php
require("IRCinventoryfunctions.php");
require_once 'IRCinventoryconfig.php';

$aTable = file_get_contents('php://input');
$aTable = substr($aTable, 6);

$connection = new mysqli($db_hostname, $db_username, $db_password, $db_database, $db_port);
    if ($connection->connect_error) die($connection->connect_error);
    global $connection;

$result = $connection->query("SHOW TABLES");

$table = array();
    while ($row = $result->fetch_row()){
    $table[] = $row[0];
    }
$count = count($table);
?>

<div id="content">

<?php
$thatTable = !empty($aTable) ? $aTable : "OUTGOING";
    {
session_start();
$_SESSION['thatTable'] = $thatTable;
global $thatTable;  

$queryColumns  = "SHOW COLUMNS FROM $thatTable";
$resultColumns = $connection->query($queryColumns);
    if (!$resultColumns) die ("Database access failed: " . $connection->error);
global $resultColumns;

$queryRows  = "SELECT * FROM $thatTable";
    $resultRows = $connection->query($queryRows);
    if (!$resultRows) die ("Database access failed: " . $connection->error);
global $resultRows;

$rows = $resultRows->num_rows;
global $rows;

global $connection;

drawTable();

$connection->close();
}

?>
</div> <!-- End #content -->
<!-- Dropdown Menu for Table Selection -->

<div id="contentHeader">
    <div id="tableNameContainer">
        <div id="tableName">
        <?php 
            session_start();
            echo "<b>" . $_SESSION['thatTable'] . "</b>";
        ?>
        </div>
    </div>
    <div id="tableName"></div>
    <div id="alignSelect">
    <div id="select">
        <form name="selectTable" action="" method="POST">
            <select id="values" name="value">
                <option value="">--Select Table--</option>
                <?php for ($pointer = 0 ; $pointer < $count ; ++$pointer) {
                    echo <<<_END
                        <pre>
                            <option value="$table[$pointer]">$table[$pointer]</option>
                        </pre>
_END;
                }
                ?>
            </select>
        </form>
    </div> <!-- End .select -->

<div id="deleteSelect">
        <form name="deleteTable" action="IRCprocessinventory.php" method="POST">
            <select id="deleteTable" name="deleteTable">
                <option value="">--Delete Table--</option>
                <?php for ($pointer = 0 ; $pointer < $count ; ++$pointer) {
                    echo <<<_END
                        <pre>
                            <option value="$table[$pointer]">$table[$pointer]</option>
                        </pre>
_END;
                }
                ?>
            </select>
            <input type="submit" value="delete table">
        </form>
    </div> <!-- End deleteSelect -->
    </div> <!-- End alignSelect -->
</div> <!-- End #contentHeader -->
</div> <!-- End #IRCaddTables -->
</body>
</html>

Answer 1

The tables are loaded via AJAX on selection, hence the new DOM elements dont have the click button event handler attached.

When the AJAX call is completed, rebind the event handlers for the buttons.

This should solve the problem.

Hope it helps!