Jquery按钮click（）功能不起作用[重复]答案

【问题标题】：Jquery button click() function is not working [duplicate]Jquery按钮click（）功能不起作用[重复]
【发布时间】：2013-08-13 22:32:23
【问题描述】：

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

【问题讨论】：

May be id conflict. - 你试过自己解决冲突吗？
您在新按钮上重新使用了 ID“add”。 “id”属性的值只能在页面上使用一次。 edit 哦，等等，你删除了原来的按钮。那么这就是问题所在:)
我遇到了同样的问题，但我的元素不是动态生成的，它是页面上的普通 ol' 元素。我相信这是由于 Knockout.js 的干扰。

标签： javascript jquery html

【解决方案1】：

您需要在这里使用.on() 的事件委托语法。变化：

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

到

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

jsFiddle example

【讨论】：

我还有一个问题，当我点击“+”按钮时，它添加了两个文本字段。假设我添加了 4 到 5 个文本字段，现在我尝试使用“-”按钮删除每个字段。当我到达我的第二个 div 元素并单击“-”时，它也会从我的第一个 div 元素中删除“+”按钮。有没有办法在第一个“-”按钮上添加事件，以便在单击“-”后它应该将“+”按钮添加回我的第一个 div 元素？？
移动 + 按钮，让它留在同一个地方，而不是经常移动它不是更简单吗？
@j08691 我不想要这个
那么，如果我理解正确的话，您需要检查最后一行何时被删除，然后在新的最后一行添加一个新的添加按钮。
试试这个jsfiddle.net/j08691/4QtB4/4

【解决方案2】：

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

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

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

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

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

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

【讨论】：

【解决方案3】：

在使id 在document 中唯一之后，您必须使用event delegation

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

【讨论】：

【解决方案4】：

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

【讨论】：