Question

我刚刚开始探索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（）。另外，我在重构代码时使用了这些方法。不过，我找不到解决方案。先感谢您。

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

Answer 1

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

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

see my other answer.

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

动态创建元素的事件绑定

3 个答案: