0

I am having trouble targeting rows newly created by hitting "Enter" with the code below. If I felt so inclined, I would like to keep hitting "Enter" to create new rows; however, hitting enter twice will only produce a maximum of one new row (from the original HTML rows). In attempt to debug the situation, I used a click event listener to console log the nodes associated with the table and found it odd that there are text nodes in between every row from the native HTML; however, these text nodes are not dynamically generated with every new row. Are these text nodes required for an HTML table to function properly?

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8;charset=utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $( document ).ready(function() {
            $("tr").on("keydown", "input", function(){
                keyDownLocation = this.selectionStart;
            });

            $("tr").on("keyup", "input", function(e){
                if (e.key === "Enter") {
                    var tempSelect = this.value.substr(this.selectionStart);
                    this.value = this.value.substr(0, this.selectionStart);
                    $(this).parent().parent().after('<tr><td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td><td class="item-td"><input class="input-item" type="text" value="' + tempSelect + '"></td></tr>');
                    $(this).parent().parent().next().find(".input-item").focus();
                }
            });

            $("tr").on("click", "input", function(){
                console.log($(this));
                console.log($(this).parent().parent().parent()[0].childNodes);
            });
        });
    </script>
    <title>Title</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th><input type="checkbox" name="checklist-list" class="checkbox-box"></th>
                <th>Item</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
                <td class="item-td"><input class="input-item" type="text" value="Artificial"></td>
            </tr>
            <tr>
                <td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
                <td class="item-td"><input class="input-item" type="text" value="Broken"></td>
            </tr>
            <tr>
                <td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
                <td class="item-td"><input class="input-item" type="text" value="Casual"></td>
            </tr>
        </tbody>
        <tfoot>
        </tfoot>
    </table>
</body>
</html>
Cœur
  • 37,241
  • 25
  • 195
  • 267
idionym
  • 55
  • 1
  • 7
  • The issues is, the `.on()` is not attaching to the dynamically created rows. You need to change it to `$("#myTable").on("keyup", "tr td input", function(){});` – Kramb Jul 17 '17 at 12:44
  • If I had the fortune of finding that post, I might not have found the realized the nuance of the static ancestor element (before the "on" method) vs the targeted dynamically created element (after the on method). I would argue that you are correct that there is a fair amount of overlap between this question and the one you reference. I'm still curious to know why the text child nodes (between nodes) aren't being dynamically generated JQuery as they are automatically generated by the original HTML. Thank you for your help, Kramb! – idionym Jul 17 '17 at 21:44
  • The reason is because the event handler is bound to every `tr` element on the page at the time the page loads. If you create a `tr` element after page load, like you do in the keyup event, then they are new to the DOM and do not have the same handlers as the original `tr`s. If you attach it to the table, then the handler says that ALL `tr`s that I contain must use this handler. This includes `tr`s generated after the DOM has loaded. – Kramb Jul 18 '17 at 17:49

1 Answers1

0

They are, it's just that your delegation selector is wrong. The tr you insert isn't bound like the others at DOM ready... so bind the to the tbody that's already there, then look up the tr

$("tbody").on("keydown", "tr input", function(){


$("tbody").on("keyup", "tr input", function(e){


$("tbody").on("click", "tr input", function(){

Demo: https://jsfiddle.net/ooavyybm/

tymeJV
  • 103,943
  • 14
  • 161
  • 157