Jquery 按钮 click() 功能不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18189948/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery button click() function is not working
提问by Free-Minded
I am trying to create dynamic form where user can add dynamic text-fields based on their requirement. Here is my jquery code ..
我正在尝试创建动态表单，用户可以根据他们的要求添加动态文本字段。这是我的 jquery 代码..
$(document).ready(function() {
$("#add").click(function() {
var intId = $("#buildyourform div").length +1;
var fieldWrapper = $("<div class=\"fieldwrapper\" name=\"field" + intId + "\" id=\"field" + intId + "\"/>");
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);
});
});
and Html code is ...
和 Html 代码是...
<fieldset id="buildyourform">
<legend>Build your own form!</legend>
<div class="fieldwrapper" name="field1" id="field1" />
<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" />
</div>
</fieldset>
<input type="submit" value="send" id="asdasd" name="submit" />
Check my JSFiddlealso.
也检查我的JSFiddle。
Whats wrong with me is when user click on "+" button first time then click function working and it adds two text-fields into my fieldset. But after that when i click on "+" button, its not triggering click function. May be id conflict. Please help.
我有什么问题是当用户第一次单击“+”按钮然后单击功能工作时，它将两个文本字段添加到我的字段集中。但在那之后，当我点击“+”按钮时，它不会触发点击功能。可能是id冲突。请帮忙。
回答by j08691
You need to use the event delegation syntax of .on()here. Change:
您需要使用.on()此处的事件委托语法。改变：
$("#add").click(function() {
to
到
$("#buildyourform").on('click', '#add', function () {
回答by Rory McCrossan
You need to use a delegated event handler, as the #addelements dynamically appended won't have the click event bound to them. Try this:
您需要使用委托的事件处理程序，因为#add动态附加的元素不会将 click 事件绑定到它们。尝试这个：
$("#buildyourform").on('click', "#add", function() {
// your code...
});
Also, you can make your HTML strings easier to read by mixing line quotes:
此外，您可以通过混合行引号使 HTML 字符串更易于阅读：
var fieldWrapper = $('<div class="fieldwrapper" name="field' + intId + '" id="field' + intId + '"/>');
Or even supplying the attributes as an object:
或者甚至将属性作为对象提供：
var fieldWrapper = $('<div></div>', {
'class': 'fieldwrapper',
'name': 'field' + intId,
'id': 'field' + intId
});
回答by Suresh Atta
After making the idunique across the document,You have to use event delegation
在id跨过唯一性之后document，您必须使用事件委托
$("#container").on("click", "buttonid", function () {
alert("Hi");
});
回答by David MacCrimmon
The click event is not bound to your new element, use a jQuery.onto handle the click.
单击事件未绑定到您的新元素，请使用 ajQuery.on来处理单击。
