javascript - 未定义的输入、动态页面更改、html 中的 javascript
问题描述
当我单击注册按钮并出现输入字段时,会出现问题。当我填写时以及当代码跳转到$ (document) .on ("click", "#register_in", function () all $().val()
该函数中的函数时未定义。我想Dom树有问题。谁能帮助我。
$(document).on("click", "#register_in", function() {
var error = "";
if ($("username").val() == "" || $("password").val() == "" || $("name").val() == "" ||
$("lastname").val() == "" || $("jmbg").val() == "" || $("tel").val() == "" || $("email").val() == "") {
error += "Sva polja moraju da budu popunjena";
}
var n = $("jmbg").length;
if (n != 13) {
error += "\nJMBG mora da ima 13 cifara";
}
$("#error1").text(error);
});
$("#register").click(function() {
var text = "<div class=\"Centar\"><div id= \"error1\" class=\"Red\" ></div >";
text += "Korisnicko ime: <br /> <input type=\"text\" id=\"username\" /> <br />";
text += "Lozinka: <br /> <input type=\"password\" id=\"password\" /> <br />";
text += "Ime:<br /> <input type=\"text\" id=\"name\" /> <br />";
text += "Prezime:<br /> <input type=\"text\" id=\"lastname\" /> <br />";
text += "Pol: <br /> <select id=\"pol\"><option value=\"M\">Musko</option><option value=\"Z\">Zensko</option></select><br />";
text += "JMBG:<br /> <input type=\"text\" id=\"jmbg\" /> <br />";
text += "Kontakt telefon:<br /> <input type=\"text\" id=\"tel\" /> <br />";
text += "Email:<br /> <input type=\"text\" id=\"email\" /> <br />";
text += "<input type=\"submit\" id=\"register_in\" value=\"Register\" /> </div >";
$("#screen").html(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Naslov">Taksi sluzba</div>
<div id="mainmanu" class="Meni">
<table>
<tr>
<td name="menu" id="login">Login</td>
<td>|</td>
<td name="menu" id="register">Register</td>
</tr>
</table>
</div>
<br /><br /><br />
<div id="screen">
<div class="Centar">
<div id="error1" class="Red"></div>
Korisnicko ime:<br /> <input type="text" id="username" /><br /> Lozinka:
<br /> <input type="password" id="password" /><br />
<input type="submit" id="log_in" value="Login" />
</div>
</div>
解决方案
您必须在#
此处设置,$("#...").val()
因为它是 id 的选择器,
请参见下面的代码:
$(document).on("click", "#register_in" , function () {
var error = "";
if ($("#username").val() == "" || $("#password").val() == "" || $("#name").val() == "" ||
$("#lastname").val() == "" || $("#jmbg").val() == "" || $("#tel").val() == "" || $("#email").val() == "")
{
error += "Sva polja moraju da budu popunjena";
}
var n = $("jmbg").length;
if (n != 13)
{
error += "\nJMBG mora da ima 13 cifara";
}
$("#error1").text(error);
});
$("#register").click(function () {
var text = "<div class=\"Centar\"><div id= \"error1\" class=\"Red\" ></div >";
text += "Korisnicko ime: <br /> <input type=\"text\" id=\"username\" /> <br />";
text += "Lozinka: <br /> <input type=\"password\" id=\"password\" /> <br />";
text += "Ime:<br /> <input type=\"text\" id=\"name\" /> <br />";
text += "Prezime:<br /> <input type=\"text\" id=\"lastname\" /> <br />";
text += "Pol: <br /> <select id=\"pol\"><option value=\"M\">Musko</option><option value=\"Z\">Zensko</option></select><br />";
text += "JMBG:<br /> <input type=\"text\" id=\"jmbg\" /> <br />";
text += "Kontakt telefon:<br /> <input type=\"text\" id=\"tel\" /> <br />";
text += "Email:<br /> <input type=\"text\" id=\"email\" /> <br />";
text += "<input type=\"submit\" id=\"register_in\" value=\"Register\" /> </div >";
$("#screen").html(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="Naslov">Taksi sluzba</div>
<div id="mainmanu" class="Meni">
<table>
<tr>
<td name="menu" id="login">Login</td>
<td>|</td>
<td name="menu" id="register">Register</td>
</tr>
</table>
</div>
<br /><br /><br />
<div id="screen">
<div class="Centar">
<div id="error1" class="Red"></div>
Korisnicko ime:<br /> <input type="text" id="username" /><br />
Lozinka:<br /> <input type="password" id="password" /><br />
<input type="submit" id="log_in" value="Login" />
</div>
</div>
</body>
推荐阅读
- android - Android Firebase:如何创建适用于我现有通知系统的通知通道
- json - MySQL JSON 数组 - 按最后一个键排序
- c++ - 对实现文件中定义的构造函数的未定义引用
- javascript - 如何将现有库添加为依赖于我的新库?反应原生
- c++ - C++ 无法迭代函数返回的对象数组,段错误
- spring-boot - 在resilience4j中重试+断路器
- javascript - 访问函数外的对象变量
- mysql - NodeJs MySql 获取一个结果会引发错误,但可以工作
- mysql - MySQL 动态查询使用来自查询本身的信息
- python - 如何使用 lambda 计算文件中的单词数?