动态创建元素的事件绑定
[英]Event Binding on Dynamically Created Element
问题描述
我刚刚开始探索javascript和jquery，并真诚地感谢我目前进退两难的困境。 我正在尝试构建的功能涉及许多步骤：
- 'enter'键触发一个事件。
- 输入字段中的适当值（“关于”，“联系人”或“额外”）将打开一个新页面。
- 然后克隆并插入输入字段（驻留在
<p>元素中），允许用户输入另一个值。
我的困境涉及约束力。 克隆输入字段后，无论新输入值如何，首次打开的页面都将继续打开。 这意味着，如果首次打开“关于”页面，那么即使在插入的输入字段中添加了新值（“联系人”或“额外”），“关于”页面也将继续打开。 这是我写的代码：
JavaScript的
$(function() {
function cloneInput() {
var clonedElement = $("p").last().clone(true);
$("input").last().prop("disabled", true);
clonedElement.insertAfter($("p").last()).prop("id", "seven");
$("input").last().prop("value", "").focus();
}
$("#input-text").keydown(function(event) {
var keypressed = event.keyCode || event.which;
var text = $("#input-text").val();
if (keypressed == 13) {
if (text == "About") {
window.open("about.html", "_blank");
cloneInput();
} else if (text == "Contact") {
window.open("contact.html", "_blank");
cloneInput();
} else if (text == "Extra") {
window.open("extra.html", "_blank");
cloneInput();
} else {
$("<p>Command not found</p>").insertAfter("#six").prop("id", "error");
}
}
});
});
HTML
<!DOCTYPE html>
<html>
<head>
<link href="css/stylesheet.css" type="text/css" rel="stylesheet"/>
<script src="js/jquery-3.1.0.js"></script>
<script src="js/scripts.js"></script>
</head>
<body id="index-body">
<p id="one">Hello friend. My name is $%^&*$^%. Welcome to #@$%%%*&.</p>
<p id="two">To learn more, please enter a command:</p>
<p id="three">> About</p>
<p id="four">> Contact</p>
<p id="five">> Extra</p>
<p id="six">> %<input type="text" maxlength="40" autofocus id="input-text"></p>
</body>
</html>
结果
<p id="six">
<input type="text" maxlength="40" autofocus id="input-text" disabled>
</p>
<p id="seven">
<input type="text" maxlength="40" autofocus id="input-text">
</p>
我搜索了stackoverflow并了解了.on（）,. off（）和.change（）。 另外，我在重构代码时使用了这些方法。 不过，我找不到解决方案。 先感谢您。
注意：我知道我的命名约定需要清理 。
3 个解决方案
解决方案1
2 2016-10-28 06:10:45
将您的事件绑定到文档本身而不是您要触发的元素上
$(document).on('keydown', "#input-text", function(event) {
e.preventDefault();
// all your code..
});
解决方案2
1 2016-10-28 05:58:13
如果要在动态创建的元素上调用函数，则应使用
$(document).on(<event>, <object>, function(event) {
});
示例：这将执行单击类class1的元素的操作（即使在动态创建的元素上）
$(document).on('click', '.class1', function(event) {
/* do something here */
});
在你的情况下：
$(document).on("click", "#input-text", function(event) {
var keypressed = event.keyCode || event.which;
var text = $("#input-text").val();
if (keypressed == 13) {
if (text == "About") {
window.open("about.html", "_blank");
cloneInput();
} else if (text == "Contact") {
window.open("contact.html", "_blank");
cloneInput();
} else if (text == "Extra") {
window.open("extra.html", "_blank");
cloneInput();
} else {
$("<p>Command not found</p>").insertAfter("#six").prop("id", "error");
}
}
});
解决方案3
0 已采纳 2016-10-28 06:16:34
一切看起来都不错只有一个问题是访问字段值而不是$（'#input-text'）。val（）使用$（this）.val（）总是得到当前元素值..
$(function() { function cloneInput() { var clonedElement = $("p").last().clone(true); $("input").last().prop("disabled", true); clonedElement.insertAfter($("p").last()).prop("id", "seven"); $("input").last().prop("value", "").focus(); } $("#input-text").keydown(function(event) { var keypressed = event.keyCode || event.which; var text = $(this).val(); if (keypressed == 13) { if (text == "About") { window.open("about.html", "_blank"); cloneInput(); } else if (text == "Contact") { window.open("contact.html", "_blank"); cloneInput(); } else if (text == "Extra") { window.open("extra.html", "_blank"); cloneInput(); } else { $("<p>Command not found</p>").insertAfter("#six").prop("id", "error"); } } }); });
将事件绑定到动态创建的元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.