动态表单的 jQuery 选择器答案

【问题标题】：jQuery Selector for Dynamic Form动态表单的 jQuery 选择器
【发布时间】：2018-09-07 15:01:03
【问题描述】：

我有下表，它实际上封装了一个动态表单。我需要在表的 Rmk 列中选择特定的 .check 类，并在该行的任何输入字段的blur() 事件上打印Hello World。在我创建新行之前，它绝对可以正常工作。当我创建一个新行时，它无法选择类。有什么帮助吗？

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>

【问题讨论】：

Event binding on dynamically created elements?的可能重复
对不起，这不是..它不符合我的具体问题。 :(
确实如此。您正在创建新的输入元素，并且您期望为预先存在的输入创建的绑定也适用于新的动态创建的输入。这就是委托事件绑定（在副本中提到）存在的原因。还有额外的参考。 learn.jquery.com/events/event-delegation
好吧，可能是这样，但由于我对事件绑定知之甚少，我仍然无法将其与我的问题联系起来。您能在答案中纠正我的 sn-p 吗？
花一些时间阅读重复的帖子，以及我在评论中提供的参考。我可以把它给你，但是能够阅读文档是开发的一个重要方面。不要害怕尝试文档中的内容。

标签： jquery jquery-selectors dynamic-forms

【解决方案1】：

正如建议的那样，部分答案与Event binding on dynamically created elements 有关，我完全同意谁编写了 cmets 以仔细阅读该内容以及有关事件委托的官方文档。

无论如何，这不是完整的答案，因为您需要在动态创建新行时更正您的代码。基本上，您不会使用在 blur 事件中使用的 <span> 类 check 创建第三个 td 元素。

最后是这样的：

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>

【讨论】：

【解决方案2】：

我会建议做的更容易一点：

对行进行一些隐藏的 sn-p，使其更易于使用。

<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>

这会将您的 myCreateFunction 变成这样：

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();
});

【讨论】：