M.M. M.M. - 1 month ago 7
Javascript Question

Event Binding on Dynamically Created Element

I have just begun my exploration of javascript and jquery, and would sincerely appreciate any help with my current dilemma. The feature that I am trying to build involves a number of steps:


  1. The 'enter' key triggers an event.

  2. The appropriate value ('About', 'Contact', or 'Extra') within the input field will open a new page.

  3. The input field (residing within a
    <p>
    element) is then cloned and inserted, allowing the user to input another value.



My dilemma involves binding. Once the input field has been cloned, the page that was first opened will continue to open regardless of a new input value. Meaning, if the 'About' page was first opened, then the 'About' page will continue to open even when a new value ('Contact' or 'Extra') is added to the inserted input field. Here is the code that I have written:

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>


result

<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>


I have searched stackoverflow and learned about .on(), .off(), and .change(). In addition, I have utilized these methods when refactoring my code. Still, I cannot find a solution. Thank you in advance.

Note: I am aware that my naming conventions need to be cleaned up.

Answer

Everything is looking good only one issue is accessing filed value instead of $('#input-text').val() use $(this).val() always gets current element value..

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

    });