如何解决找到2个具有非唯一ID的元素
当我们在两个不同的id
标签中使用相同的form
名称时,我会收到以下警告。
[DOM]找到2个具有非唯一ID的元素
这是我的HTML代码段:
<div class="modal-dialog">
<form action="" method="post" id="myid-1" name="myid-1">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
<div class="modal-dialog">
<form action="" method="post" id="myid-2" name="myid-2">
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
<label for="Job_Name">Job Name<span class="text-danger">*</span></label>
<button type="submit">Submit</button>
</form>
</div>
如何解决“发现2个具有非唯一ID的元素”警告?
解决方法
您需要将id="Job_Name"
更改为唯一,例如id="Job_Name1" id="Job_Name2"
等作为ID在DOM中必须是唯一的。
当您想使用document.getElementById('Job_Name')
或jQuery $('#Job_Name')
选择元素时,它将产生冲突,因为您将无法获得具有相同id的第二个或其他元素。您将需要使用index和querySelectorAll,这将首先破坏使用Id的目的。
因为您在同一页面中提到了两个具有相同ID(“ Job_Name”)的输入元素 您不能在同一页面中为两个不同的元素赋予相同的ID
, id
是定义元素标识的标识符。它被设计为像元素的key
一样工作,因此它必须是唯一的。
检查此答案。 https://stackoverflow.com/a/2187788/8230086
,更改输入的ID,因为这是导致您出现问题的原因。
通常,您不想在任何元素上使用相同的ID。
id建议使用与job_name1 / job_name2类似的方式
, <input type="text" class="form-control" id="Job_Name" name="Job_Name" required="" >
以两种不同形式复制输入标签
您必须对不同的元素使用不同的ID
,只需对两个字段之一使用new {id =“”}
@Html.HiddenFor(m => m.Name,new { id = "" })
,
<input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">
您需要为每个输入更改 de id
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。