본문 바로가기

기존카테고리/하루에_한번보고_생각하기

jQuery 해당 요소(Element) 이벤트 적용

 $('.name').on('focusout', function(e){

            var nameField = $(e.target);

            webConsole("name field '"+nameField.attr('id')+"' was updated to '"+nameField.val()+"'");

        })


e.target 으로 해당 요소(Element)를 선택한다.




<!DOCTYPE html>

<html lang="ko">

<head>

<meta charset="UTF-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


</head>

<body>

<form name="myForm" id="myForm" method="POST">

   <input type="text" name="name[first]" id="first_name" class="name" /><br />

   <input type="text" name="name[last]" id="last_name" class="name" /><br />

   <button type="submit">Submit Form</button>

</form>


    <div id="webConsole">

        <h3>web Console</h3>

    </div>




    <script>

        var webConsole = function(msg){

            var console = $('#webConsole');

            var newMessage = $('<p>').text(msg);

            console.append(newMessage);

        }


        $(document).on('ready', function(){

            // alert('ok');

            $('#first_name').attr('placeholder', 'Johnny');

            $('#last_name').attr('placeholder', 'Appleseed');

        })


        $('#myForm').on('submit', function(){

            var first_name = $('#first_name').val();

            var last_name = $('#last_name').val();


            webConsole("The form was sublitted");

            alert("Hello, "+first_name+" "+last_name+"!");

        })


        $('.name').on('focusout', function(e){

            var nameField = $(e.target);

            webConsole("name field '"+nameField.attr('id')+"' was updated to '"+nameField.val()+"'");

        })

    </script>


</body>

</html>



'기존카테고리 > 하루에_한번보고_생각하기' 카테고리의 다른 글

객체생성, 삽입  (0) 2017.07.09