Question

我显示了一组记录，可以通过单击所需记录旁边的编辑链接来编辑单个记录的信息。单击链接后，我通过javascript插入编辑模式，并使用该记录的数据填充字段。

我发现的是大约60％的时间，字段显示为空，这意味着模式插入到DOM中的速度比填充字段的速度快，这是通过拉动记录数据来实现的。属性通过getAttribute（）。它必须是毫秒差异。每个编辑按钮都有一组数据属性：

<span class="edit-btn" data-id="gREwTytnO" data-month="11" data-year="2020" data-name="John Doe">
    <span class="fa fa-edit" aria-hidden="true"></span>Edit
</span>

以下是模态的一行：

<input type="text" placeholder="Month (mm)" class="month-field" id="month" value="' + event.target.getAttribute('data-month') + '" required>

然后我将其插入DOM。看起来似乎event.target.getAttribute()还没有完成从DOM中提取数据并继续执行并插入模态。

我有哪些选项可以确保在将模态插入DOM之前，所有属性都已加载？

Answer 1

一种选择，虽然可能有更多有效的方法，但是将所有数据属性收集到显示模态的函数的本地变量之前。

这样你就不会遇到竞争条件，你希望event.target.getAttribute()能够在需要价值之前完成它的工作。

加载数据之前发生的模态插入

1 个答案: