为什么'；t javascript函数在第一次运行时更新DOM

我有一个动态表单，用户可以通过单击按钮添加输入。这个很好用。但是，当单击以删除输入时，第一次单击不会删除输入。每次单击后都会按预期删除输入。我可以看到，它在第一次单击删除时运行函数，但DOM中没有更新任何内容，因此字段保持不变。这是我的HTML：

<button onclick="AddFileField()">Add File</button>
<br />
<br />
<form action="" method="post" enctype="multipart/form-data">
    <div id="fileFields"></div>
    <br />
    <input type="submit" value="Upload" />
</form>

添加文件

以及相关的javascript：

function removeField() {
    $('.removeclass').click(function () {
        $(this).parent().remove();
    });
    return false;
}

var FieldCount = 1; //to keep track of text box added
function AddFileField() {
    var MaxInputs = 10; //maximum input boxes allowed
    var InputsWrapper = $("#fileFields"); //Input boxes wrapper ID
    var x = $("#fileFields > div").length + 1; //current text box count

    if (x <= MaxInputs) //max input box allowed
    {
        $(InputsWrapper).append('<div class="fileInp"><label for="file' + FieldCount + '">File:</label><input type="file" name="files" class="inpinl" id="file' + FieldCount + '" /><a href="#" class="removeclass" onclick="removeField()">&times;</a></div>');
        FieldCount++;
    }
    return false;
}

函数removeField（）{
$（'.removeclass'）。单击（函数（）{
$（this.parent（）.remove（）；
});
返回false；
}
var FieldCount=1//跟踪添加的文本框
函数AddFileField（）{
var MaxInputs=10；//允许的最大输入框数
var inputswraper=$（“#文件字段”）；//输入框包装器ID
var x=$（“#fileFields>div”）.length+1；//当前文本框计数
如果（x是因为您正在另一个事件处理程序中注册事件处理程序


我删除了事件处理程序，现在，您将单击的元素作为
elem
传递到函数本身

事实上，只要jquery是公开的（您的情况就是这样），您甚至不需要这个函数

这是因为您正在另一个事件处理程序中注册事件处理程序


我删除了事件处理程序，现在，您将单击的元素作为
elem
传递到函数本身

事实上，只要jquery是公开的（您的情况就是这样），您甚至不需要这个函数

您不是在第一次单击时执行代码来删除行，而是将单击处理程序添加到链接中。之后它会工作，因为$（'.removeclass'）。单击（…然后按预期激发。
您不是在第一次单击时执行代码来删除行，您只是将单击处理程序添加到链接中。之后它会工作，因为$（'.removeclass'）。单击（…然后按预期激发。
正在使用一个工作的fiddle

问题在于功能：

function removeField() {
    $('.removeclass').click(function () {
        $(this).parent().remove();
    });
    return false;
}

当您单击
X
时，将调用此函数，该函数将向
X
添加一个
click
事件处理程序以将其删除；但是，直到您下次单击它时才会调用此事件处理程序。（这就是为什么两次单击
X
都有效）

在更新的fiddle中，您只需将
此
传递给removeField，如下所示：

//HTML
<a href="#" class="removeclass" onclick="removeField(this)">&times;</a></div>

//JS
function removeField(me) {
    $(me).parent().remove();
    return false;
}

//HTML
//JS
函数removeField（me）{
$（me.parent（）.remove（）；
返回false；
}
一把小提琴正在工作

问题在于功能：

function removeField() {
    $('.removeclass').click(function () {
        $(this).parent().remove();
    });
    return false;
}

当您单击
X
时，将调用此函数，该函数将向
X
添加一个
click
事件处理程序以将其删除；但是，直到您下次单击它时才会调用此事件处理程序。（这就是为什么两次单击
X
都有效）

在更新的fiddle中，您只需将
此
传递给removeField，如下所示：

//HTML
<a href="#" class="removeclass" onclick="removeField(this)">&times;</a></div>

//JS
function removeField(me) {
    $(me).parent().remove();
    return false;
}

//HTML
//JS
函数removeField（me）{
$（me.parent（）.remove（）；
返回false；
}
原因是您正在使用
onclick=“removeField（）”

让我们看一看您的函数。当您单击“删除”按钮时，将运行以下脚本。该脚本随后创建一个单击处理程序，该处理程序将在下次单击时激活，因为当您第一次单击“删除”时，该处理程序未被创建

function removeField() {
    $('.removeclass').click(function () {
        $(this).parent().remove();
    });
    return false;
}

所以您需要替换这是另一个函数。因为您使用的是jQuery，所以您可以学习如何用于动态生成的元素

$(document).on('click', '.removeclass', function () {
    $(this).parent().remove();
});

原因是您正在使用
onclick=“removeField（）”

让我们看一看您的函数。当您单击“删除”按钮时，将运行以下脚本。该脚本随后创建一个单击处理程序，该处理程序将在下次单击时激活，因为当您第一次单击“删除”时，该处理程序未被创建

function removeField() {
    $('.removeclass').click(function () {
        $(this).parent().remove();
    });
    return false;
}

所以您需要替换这是另一个函数。因为您使用的是jQuery，所以您可以学习如何用于动态生成的元素

$(document).on('click', '.removeclass', function () {
    $(this).parent().remove();
});

我将您的代码模块化了一点，并将其更改为比以前更多地使用jQuery。这只是另一种方法，其他答案也是有效的


var字段={
btnAdd:$（“#添加字段”），
inputWrapper:$（“#文件字段”），
最大输入：10，
现场计数：1，
init:function（）{
this.inputWrapper.on（'click'，'.removeclass'，this.removeInput'）；
this.btnAdd.on（'click'，this.appendField））；
},
removeInput:function（）{
//这将引用您单击的html元素
$（this.parent（）.remove（）；
},
appendField:函数（）{
//这将引用您单击的html元素
if（fields.inputWrapper.children（'div'）.length我将您的代码模块化了一点，并将其更改为比以前更多地使用jQuery。这只是另一种方法，其他答案也是有效的


var字段={
btnAdd:$（“#添加字段”），
inputWrapper:$（“#文件字段”），
最大输入：10，
现场计数：1，
init:function（）{
this.inputWrapper.on（'click'，'.removeclass'，this.removeInput'）；
this.btnAdd.on（'click'，this.appendField））；
},
removeInput:function（）{
//这将引用您单击的html元素
$（this.parent（）.remove（）；
},
appendField:函数（）{
//这将引用您单击的html元素
if（fields.inputWrapper.children（'div'））.length第一次单击x click处理程序时附加，第二次-它执行。第一次单击x click处理程序时附加，第二次-它执行。感谢您的选择。我将jQuery和我的外部javascript文件加载到正文中，因此我得到一个错误，说$undefined，因为我认为jQuery尚未完成加载在点击调试错误后查找。任何解决方案