通过 ajax 加载的元素不能在 jquery 中使用

Question

I tried to put my data.tables in another file and load that via ajax, sadly the form submission doesn't work anymore.

I just get the following error: Uncaught TypeError: this.type is undefined , the idRow Value is still submitted (I can print that to console) so at the moment I don't get why it says that it is undefined.

When all was in a single page the following was working without Problems:

Form creation and submission after button click:

<script>
        function submitForm(rowid) {
            form = document.createElement("form");
            form.action = "save_tables.php"; /
            form.method = "post"; 
            form.style.display = "none";
            $("#"+rowid+" td").children().each(function() { 
                if(this.type.substring(0,6) == "select") { 
                    input = document.createElement("input"); 
                    input.name = this.name;
                    input.type = "hidden";
                    input.value = this.value;
                    form.appendChild(input);
                } else {
                    $(this).clone().appendTo(form);
                }

            });
            document.body.appendChild(form);
            form.submit();
        }
</script>

Example for one entry in the table

<tr id="entry_4" class="row100 body">
<td><input type="text" name="lang"/></td>
<td><input type="text" name="l_code"/></td>
<td><input type="text" name="code"/></td>
<td><button onclick="submitForm('entry_4')">Change</button></td>
</tr>

I replaced the table with the following and then loaded the tables via ajax.

<div align="center" id="selection">
<button onclick="showTables('lang')">Lang</button>
<button onclick="showTables('cat')">Cat</button>
</div>

<div id="target">
</div>

<script>
    function showTables(showtype) {
        $.get(`load_tables.php?show=${showtype}`, function(data) {
            $('#target').html(data);
        })
    }
</script>

Answer 1

Found the problem and a fix, even though I don't know why it happens.

When loading the table via ajax, this.type is undefined for some inputs so I changed the if(this.type.substring(0,6) == "select") {

to the following to get it working:

if(typeof this.type.= 'undefined' && this.type,substring(0,6) == "select") {

All inputs are submitted (even if there is a select one) so it works for me