30

我正在尝试创建动态表单，用户可以根据他们的要求添加动态文本字段。这是我的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);

    });

});

和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" />

也检查我的JSFiddle。

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

4

4 回答 4

59

您需要使用.on()此处的事件委托语法。改变：

$("#add").click(function() {

至

$("#buildyourform").on('click', '#add', function () {

jsFiddle 示例

于 2013-08-12T14:43:48.150 回答
18

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

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

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

var fieldWrapper = $('<div class="fieldwrapper" name="field' + intId + '" id="field' + intId + '"/>');

或者使用字符串插值（ES6 特性，所以这在 IE 中不起作用）：

var fieldWrapper = $(`<div class="fieldwrapper" name="field${intId}" id="field${intId}"/>`);

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

var fieldWrapper = $('<div></div>', { 
  class: 'fieldwrapper',
  name: 'field' + intId,
  id: 'field' + intId
});
于 2013-08-12T14:45:04.063 回答
3

在使id唯一的跨界之后document，您必须使用事件委托 

$("#container").on("click", "buttonid", function () {
  alert("Hi");
});
于 2013-08-12T14:44:34.580 回答
1

点击事件没有绑定到你的新元素，使用 ajQuery.on来处理点击。

于 2013-08-12T14:47:03.840 回答