javascript - 为什么 javascript 函数在第一次运行时不更新 DOM

Question

我有一个动态表单，用户可以通过单击按钮添加输入。这很好用。但是，当单击以删除输入时，第一次单击不会删除输入。之后的每次点击都会按预期删除输入。我可以看到它在第一次单击删除时运行该函数，但 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。第一次单击不执行任何操作，然后继续单击将删除字段。我怎样才能获得第一次点击来删除该字段？

Answer 1

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

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

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

事实上，只要公开 jquery(在您的情况下)，您甚至不需要该函数。

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