我有一个小脚本,可以在通过 jQuery 单击链接时创建新的 HTML 表单元素:
Javascript
var counterx = 2;
var counter = 2;
$(document).ready(function(){
$("#addMoreRcpt").click(function(){
if (counterx>10){
alert("Only 10 reciepients are allowed");
return false;
}
var newTextBoxTr = $(document.createElement('tr')).attr("id", 'RcptEml_' + counter);
newTextBoxTr.append("<td><input type="button" id="txtRcptID_'+ counter + '"></td><td><input type="button" value="Search" id="SearchItem_'+ counter + '">
</td>");
newTextBoxTr.appendTo("#RcptGroup");
counter++;
counterx++;
});
});
HTML
<table border=1>
<div id="RcptGroup">
<tr>
<th>1</th>
<th>2</th>
</tr>
<div id="1">
<tr>
<td><input type="text"></td>
<td><input type="button" value="Search" id="SearchItem_1"></td>
</tr>
</div>
</div>
</table>
<br /><a id="addMoreRcpt" href="#" >Add row</a>
现在,对于每个新创建的 HTML 表单,我需要创建一个新的 jQuery 事件,以便“搜索按钮”正常运行。这是搜索按钮的 jQuery:
$("#searchItem_1").on('click', function() {
$("#bg").fadeIn(400, function() {
$("#modal").fadeIn(400);
});
});
$("#modal img").on('click', function() {
var text = $(this).siblings('.descr').text();
$("#modal").fadeOut(400, function() {
$("#bg").fadeOut(400, function() {
$("#txtRcptID_1").val(text);
});
});
});
你看,上面的脚本引用了 search_Item_1 按钮和 ID 为 txtRcptID_ID 的文本框。我需要完成的是每次单击“添加行”按钮时创建上面的脚本。
但是还需要有正确的seachItem_#和txtRcpt_#,对应新元素创建时的计数器编号。
例如:当我单击“添加行”时,计数器当前为 3,然后脚本添加了 id="txtRcptID_3"的新元素,并创建了一个新的 jQuery 事件,这样开始 $("#searchItem_3").on( '点击',函数(){
我试了又试,但没有成功。谁能帮忙?
编辑 **
我添加了以下代码并且非常接近,但是将模态窗口中的值添加到文本字段中仍然存在问题。我添加了一个警报功能来查看计数器的值,但是当单击搜索按钮时它神秘地增加了一个:
newTextBoxRow.appendTo("#RcptGroup");
newTextBoxRow1.appendTo("#RcptGroup");
alert("ID number:"+counter);
$("#searchItem_"+counter).on('click', function(ev){
$("#bg").fadeIn(400, function() {
$("#modal").fadeIn(400);
});
alert("ID number:"+counter);
});
$("#modal img").on('click', function(ev) {
var text = $(this).siblings('.descr').text();
$("#modal").fadeOut(400, function() {
$("#bg").fadeOut(400, function() {
$("#txtRcptID_"+counter).val(text);
});
});
});
counter++;
counterx++;
编辑 2 **
这是另一个尝试。我将搜索文本字段的 ID 更改为“txt_searchItem_'+ counter +'”。并添加了这段代码。它的功能,但仍然是一个问题。单击图像时,它会更新所有文本字段,而不仅仅是触发模态窗口的文本字段。
$(document).on('click', '.searchItemBtn', function(ev){
var getID = $(this).attr("id");
alert("ID number:"+getID);
$("#bg").fadeIn(400, function() {
$("#modal").fadeIn(400);
});
$(document).on('click', '#modal img', function(ev
var text = $(this).siblings('.descr').text();
$("#modal").fadeOut(400, function() {
$("#bg").fadeOut(400, function() {
$("#txt_"+getID).val(text);
});
});
});
});
最佳答案
如果你想使用 on
方法将处理程序附加到动态创建的元素,你应该像这样使用它:
$(parent_selector).on('click', child_selector, function(ev){
// do stuff on click
});
因此,在您的情况下,除了 id 之外,我会向您正在创建的按钮添加一个类:
newTextBoxTr.append('<td><input type="button" id="txtRcptID_'+ counter + '"></td><td><input type="button" value="Search" class="button_class" id="SearchItem_'+ counter + '">');
并且会像这样附加处理程序:
$(document).on('click', '.button_class', function(ev){
// do stuff
});
关于javascript - 动态添加 HTML 元素后创建一个 jQuery 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11930311/