动态创建元素的事件绑定

Question

我刚刚开始探索javascript和jquery，并真诚地感谢我目前进退两难的困境。 我正在尝试构建的功能涉及许多步骤：

1. 'enter'键触发一个事件。
2. 输入字段中的适当值（“关于”，“联系人”或“额外”）将打开一个新页面。
3. 然后克隆并插入输入字段（驻留在<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（）。 另外，我在重构代码时使用了这些方法。 不过，我找不到解决方案。 先感谢您。

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

Answer 1

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

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

看到我的另一个答案。

Answer 2

如果要在动态创建的元素上调用函数，则应使用

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

Answer 3

一切看起来都不错只有一个问题是访问字段值而不是$（'#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"); } } }); });