Селектор jQuery для динамической формы

Question

У меня есть следующая таблица, которая на самом деле инкапсулирует динамическую форму. Мне нужно выбрать определенный класс .check в столбце Rmk таблицы и вывести событие Hello World on blur() для любого поля ввода в этой строке. Это абсолютно нормально работает, пока я не создаю новые строки. Когда я создаю новую строку, он не может выбрать класс. Любая помощь?

function myCreateFunction() {
    var table = document.getElementById("myTable");
	  var c = document.getElementById("myTable").rows.length;
	
		var row = table.insertRow(c);
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);
		cell1.innerHTML = "<input type='text' class='lat' name='lat[]' /><span class='availability'></span>";
		cell2.innerHTML = "<input type='text' class='long' name='long[]' /><span id='availability'></span>";
    
}
function myDeleteFunction() {
	var cd = document.getElementById("myTable").rows.length;
	if(cd<=3)
	{
		//do nothing
	}
	else{
		document.getElementById("myTable").deleteRow(cd-1);
	}
}

$('input').on('blur', function() {
    var t = $(this);
    t.closest('tr').find('.check').text('Hello World');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="form-handler.php" method="POST">
<table id="myTable">
        <tr>
            <th class="theader"> Lat </th>
            <th class="theader"> Long </th>
            <th class="theader"> Rmk </th>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='long' name='long[]' /> </td>
            <td class="trow">
            <span class="check"></span> 
            </td>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='long' name='long[]' /> </td>
            <td class="trow">
            <span class="check"></span> 
            </td>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='long' name='long[]' /> </td>
            <td class="trow">
            <span class="check"></span> 
            </td>
        </tr>
    </table>
    <button class="myBtn" type="submit" id='submit' name="submit" value="submit">submit</button>
</form>
<br/>
<button onclick="myCreateFunction()">Create New Row </button>
<button onclick="myDeleteFunction()">Delete Row</button>

Answer 1

Я бы посоветовал сделать это немного проще:

Сделайте небольшой скрытый фрагмент со строками, с ним немного легче работать.

<table id="table-row-source" style="display:none">
    <tr>
        <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
        <td class="trow"> <input type='text' class='long' name='long[]' /> </td>
        <td class="trow">
            <span class="check"></span>
        </td>
    </tr>
</table>

Что бы превратить вашу функцию myCreate в следующее:

function myCreateFunction() {
    $("#myTable").append($('#table-row-source').html());
    InitializeInputEventBlur();
}

Тогда я бы превратил обработчик событий Blur в функцию, которая вызывается для готового документа, и каждый раз, когда вы создаете новую строку для восстановления связей.

function InitializeInputEventBlur() {
    $('input').on('blur', function () {
        var t = $(this);
        t.closest('tr').find('.check').text('Hello World');
    });
}

$(document).ready(function () {
    InitializeInputEventBlur();
});

Answer 2

Часть ответа, как и предполагалось, связана с привязкой события к динамически создаваемым элементам , и я полностью согласен с тем, кто написал комментарии для тщательного прочтения этого и официальную документацию о делегировании события.

В любом случае, это не полный ответ, потому что вам нужно исправить свой код при динамическом создании новой строки.По сути, вы не создаете третий элемент td с соответствующим <span> с классом check, который вы используете в событии blur.

В конце это примерно так:

function myCreateFunction() {
    var table = document.getElementById("myTable");
	  var c = document.getElementById("myTable").rows.length;
	
		var row = table.insertRow(c);
		var cell1 = row.insertCell(0);
		var cell2 = row.insertCell(1);
		var cell3 = row.insertCell(2);
		cell1.innerHTML = "<input type='text' class='lat' name='lat[]' /><span class='availability'></span>";
		cell2.innerHTML = "<input type='text' class='long' name='long[]' /><span id='availability'></span>";
		cell3.innerHTML = "<span class='check'></span>";
    
}
function myDeleteFunction() {
	var cd = document.getElementById("myTable").rows.length;
	if(cd<=3)
	{
		//do nothing
	}
	else{
		document.getElementById("myTable").deleteRow(cd-1);
	}
}

$(document).on('blur', '#myTable input', function() {
    var t = $(this);
    t.closest('tr').find('.check').text('Hello World');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="form-handler.php" method="POST">
<table id="myTable">
        <tr>
            <th class="theader"> Lat </th>
            <th class="theader"> Long </th>
            <th class="theader"> Rmk </th>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='long' name='long[]' /> </td>
            <td class="trow">
            <span class="check"></span> 
            </td>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='long' name='long[]' /> </td>
            <td class="trow">
            <span class="check"></span> 
            </td>
        </tr>
        <tr>
            <td class="troe"> <input type='text' class='lat' name='lat[]' /> </td>
            <td class="trow"> <input type='text' class='long' name='long[]' /> </td>
            <td class="trow">
            <span class="check"></span> 
            </td>
        </tr>
    </table>
    <button class="myBtn" type="submit" id='submit' name="submit" value="submit">submit</button>
</form>
<br/>
<button onclick="myCreateFunction()">Create New Row </button>
<button onclick="myDeleteFunction()">Delete Row</button>