关于javascript：Jquery按钮click（）函数不起作用

Jquery button click() function is not working

本问题已经有最佳答案，请猛点这里访问。

我正在尝试创建动态表单，用户可以根据需要添加动态文本字段。这是我的jquery代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

$(document).ready(function() {
$("#add").click(function() {
var intId = $("#buildyourform div").length +1;
var fieldWrapper = $("");
var fName = $("<input type="text" name="name" class="fieldname" id="tb"+ intId +"_1"/>");
var lname = $("<input type="text" name="email" class="lastname" id="tb"+ intId +"_2"/>");
var removeButton = $("<input type="button" class="remove" value="-" />");

var addButton = $("<input type="button" class="add" id="add" value="+" />")
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(fName);
fieldWrapper.append(lname);
fieldWrapper.append(removeButton);
fieldWrapper.append(addButton);
$(this).remove();
$("#buildyourform").append(fieldWrapper);

});

});

HTML代码是…

1
2
3
4
5
6
7
8
9

<fieldset id="buildyourform">
<legend>Build your own form!</legend>

<input type="text" name="name" class="fieldname" id="tb1_1" />
<input type="text" name="email" class="lastname" id="tb1_2" />
<input type="button" value="+" class="add" id="add" />

</fieldset>
<input type="submit" value="send" id="asdasd" name="submit" />

也检查一下我的琴。

我的问题是，当用户第一次单击"+"按钮，然后单击"函数工作"，它会在我的字段集中添加两个文本字段。但在那之后，当我点击"+"按钮时，它不会触发点击功能。可能是ID冲突。请帮忙。

相关讨论

您需要使用委托的事件处理程序，因为动态附加的#add元素不会将click事件绑定到它们。试试这个：

1
2
3

$("#buildyourform").on('click',"#add", function() {
// your code...
});

此外，还可以通过混合行引号使HTML字符串更易于阅读：

1	var fieldWrapper = $('');

甚至将属性作为对象提供：

1
2
3
4
5

var fieldWrapper = $('', {
'class': 'fieldwrapper',
'name': 'field' + intId,
'id': 'field' + intId
});

在使id在document中唯一之后，必须使用事件委托

1
2
3

$("#container").on("click","buttonid", function () {
alert("Hi");
});

单击事件未绑定到新元素，请使用jQuery.on来处理单击。