0

I am trying to take in input from the user and display it as a list. Thankfully someone has already done it and found it on JSFiddle. The codes works fine there but when I move it locally, it is not working. When I enter the text, nothing happens. I went through similar issues here but still not working.

Please advice if you spot the mistake. Thank you. 

<!DOCTYPE HTML>
<html>
    <head>     
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

        <title>List maker</title>
        <style>
            a {
                margin-left: 20px;
                color: maroon;
                text-decoration: none;
                font-weight: bold;
            }
        </style>

        <script>
            $('form').submit(function () {
                if ($('input').val() !== '') {
                    var input_value = $('input').val();
                    $('ul').append('<li>' + input_value + '<a href="">x</a></li>');
            };
                $('input').val('');
                return true;
            });

            $(document).on('click', 'a', function (e) {
                e.preventDefault();
                $(this).parent().remove();
            });
        </script>
    </head>

    <body>
        <form>
            <label>Enter info and press enter</label>
            <input type="text" />
        </form>
        <ul></ul>
    </body>
</html>
Trevor_zam
  • 592
  • 2
  • 7
  • 21

1 Answers1

3

Since your jquery code comes before your html, i think putting it in a $(document).ready() {} or moving it to the end of the body will make it work again.

keune
  • 5,779
  • 4
  • 34
  • 50