javascript - 为什么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;
}

fiddle显示问题。若要重复，请添加几个字段，然后单击x。第一次单击不执行任何操作，然后继续单击将删除字段。如何获得第一次单击以删除该字段？

最佳答案

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

http://jsfiddle.net/3e1ajtvo/11/

我删除了事件处理程序，现在，您将clicked元素作为elem传递给函数本身。

实际上，只要公开了jquery（就您而言），您甚至根本不需要该功能。

http://jsfiddle.net/3e1ajtvo/12/

关于javascript - 为什么javascript函数在第一次运行时不更新DOM，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25507943/