Javascript 动态创建元素上的事件绑定

我刚刚开始探索javascript和jquery，并衷心感谢您对我当前困境的任何帮助。我试图构建的功能包含以下几个步骤：

“回车”键触发一个事件

输入字段中的适当值（'About'、'Contact'或'Extra'）将打开一个新页面

然后克隆并插入输入字段（位于

元素中），允许用户输入另一个值

我的困境涉及约束。克隆输入字段后，第一次打开的页面将继续打开，而不考虑新的输入值。也就是说，如果“关于”页面是第一次打开的，那么即使在插入的输入字段中添加了新值（“Contact”或“Extra”）时，“关于”页面也将继续打开。以下是我编写的代码：

javascript

$（函数（）{
克隆输入（）函数{
var clonedElement=$（“p”）.last（）.clone（true）；
$（“输入”）.last（）.prop（“已禁用”，true）；
clonedElement.insertAfter（$（“p”）.last（））.prop（“id”，“seven”）；
$（“输入”）.last（）.prop（“值”，即“）.focus（）；
}
$（“#输入文本”）.keydown（函数（事件）{
var keypressed=event.keyCode | | event.which；
var text=$（“#输入文本”）.val（）；
如果（按键==13）{
如果（文本==“关于”）{
window.open（“about.html”，“_blank”）；
克隆输入（）；
}else if（文本==“联系人”）{
window.open（“contact.html”，“_blank”）；
克隆输入（）；
}else if（文本=“额外”）{
window.open（“extra.html”，“_blank”）；
克隆输入（）；
}否则{
$（“未找到命令”
”）。在（“#six”）.prop（“id”，“error”）；
}
}
});
});

html

你好，朋友。我的名字是$%^&*$^%。欢迎来到#@$%%*&

要了解更多信息，请输入命令：

>关于
>联系方式
>额外费用
>%

结果

我搜索了stackoverflow并了解了.on（）、.off（）和.change（）。此外，我在重构代码时使用了这些方法。不过，我还是找不到解决办法。先谢谢你

---

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

如果要对动态创建的元素调用函数，应该使用

$(document).on(<event>, <object>, function(event) {

});

就你而言：

$(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");
  }
}
});

$（文档）。在（“单击”，“输入文本”，函数（事件）{
var keypressed=event.keyCode | | event.which；
var text=$（“#输入文本”）.val（）；
如果（按键==13）{
如果（文本==“关于”）{
window.open（“about.html”，“_blank”）；
克隆输入（）；
}else if（文本==“联系人”）{
window.open（“contact.html”，“_blank”）；
克隆输入（）；
}else if（文本=“额外”）{
window.open（“extra.html”，“_blank”）；
克隆输入（）；
}否则{
$（“未找到命令”
”）。在（“#six”）.prop（“id”，“error”）；
}
}
});

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

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

---

一切都很好，只有一个问题是访问字段值而不是$（“#输入文本”）。val（）使用$（this）。val（）始终获取当前元素值

$（函数（）{
克隆输入（）函数{
var clonedElement=$（“p”）.last（）.clone（true）；
$（“输入”）.last（）.prop（“已禁用”，true）；
clonedElement.insertAfter（$（“p”）.last（））.prop（“id”，“seven”）；
$（“输入”）.last（）.prop（“值”，即“）.focus（）；
}
$（“#输入文本”）.keydown（函数（事件）{
var keypressed=event.keyCode | | event.which；
var text=$（this.val（）；
如果（按键==13）{
如果（文本==“关于”）{
window.open（“about.html”，“_blank”）；
克隆输入（）；
}else if（文本==“联系人”）{
window.open（“contact.html”，“_blank”）；
克隆输入（）；
}else if（文本=“额外”）{
window.open（“extra.html”，“_blank”）；
克隆输入（）；
}否则{
$（“未找到命令”
”）。在（“#six”）.prop（“id”，“error”）；
}
}
});
});如果粘贴html也将有助于提供解决方案..谢谢，@BEJGAMSHIVAPRASAD。我已经更新了我的帖子。你能在命令输入后粘贴页面上的HTML吗？基于代码，我几乎觉得我希望看到两个输入字段都具有相同的id，这可能不是您希望看到的。谢谢您的帮助。谢谢您的帮助。我将此解决方案与@BEJGAMSHIVAPRASAD提供的结合使用。非常感谢。我将此解决方案与@BEJGAMSHIVAPRASAD提供的内容结合使用。
$(document).on(<event>, <object>, function(event) {

});

$(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");
  }
}
});

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