gpt4 book ai didi

javascript - 动态创建的元素上的事件绑定(bind)

转载 作者:行者123 更新时间:2023-11-30 11:48:02 25 4
gpt4 key购买 nike

我刚刚开始探索 javascript 和 jquery,如果能帮助我解决当前的困境,我将不胜感激。我尝试构建的功能涉及多个步骤:

  1. “输入”键触发事件。
  2. 输入字段中的适当值(“关于”、“联系”或“额外”)将打开一个新页面。
  3. 然后克隆并插入输入字段(位于 <p> 元素中),允许用户输入另一个值。

我的困境涉及绑定(bind)。克隆输入字段后,无论是否有新的输入值,最初打开的页面都会继续打开。这意味着,如果“关于”页面是第一次打开,那么“关于”页面将继续打开,即使在插入的输入字段中添加了新值(“联系人”或“额外”)也是如此。这是我编写的代码:

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()。此外,我在重构代码时也使用了这些方法。尽管如此,我还是找不到解决方案。先感谢您。

注意:我知道我的命名约定需要清理

最佳答案

将事件绑定(bind)到文档本身而不是要触发的元素上

$(document).on('keydown', "#input-text", function(event) {
e.preventDefault();
// all your code..
});

see my other answer.

关于javascript - 动态创建的元素上的事件绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40298718/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com