动态表单的jQuery选择器

Posted 2021-04-13

我有下表实际封装动态表单。我需要在表的Rmk列中选择特定的.check类，并在Hello World事件上为该行的任何输入字段打印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>

答案

正如所建议的那样，答案的一部分与Event binding on dynamically created elements有关，我完全赞同撰写评论的人仔细阅读该文章和关于事件授权的官方文档。

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

最后，它是这样的：

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>

哪个会将你的myCreateFunction变为：

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

然后我将Blur事件处理程序转换为在文档就绪时调用的函数，并且每次创建新行以恢复绑定时。

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

以上是关于动态表单的jQuery选择器的主要内容，如果未能解决你的问题，请参考以下文章

Jquery 类选择器不适用于动态类选择器

jquery 动态添加表单元素

jquery中，怎么设置值。怎么获取值，怎么修改值 求代码

jQuery选择器介绍：基本选择器层次选择器过滤选择器表单选择器

小程序表单中日期选择器可以限制日期吗？

如何使用 jquery 构建动态表单构建器