Speed up development with full-stack environments for every branch.

Learn More

How to use the jQuery UI .on() method

Forked from How to use the jQuery UI Slider.

145 Runs 211 Views 41 Copies
Saved

Saved

pg1 45

pg1
published 4 years ago

<!doctype html>
<html>
<head>

    <title>How to use the jQuery UI .on() method</title>
    
    <style>
        body{
            text-align: center;
            font-family: arial;
            line-height: 60px;
            font-size: 20px;
        }
   
        .button{
            font-size:16px;
            font-weight: bold;
            padding:5px 10px;
            background: #eee;
            cursor: pointer;
            border:1px solid #999;
        }

        .button:active{
            background: #333;
        }
        
    </style>


</head>
<body>
    <span class="button">Click me</span><br />
    <span id="results"></span>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

    <script>

        //When DOM loaded we attach the event
        $(document).ready(function() {
            
            var counter = 0;

            //you can attach any event to a selected element using .on() method
            //in this example we add a click event to a span element
            //for more details check out: http://api.jquery.com/on/
            $('.button').on('click', function(){
                counter++;
                $('#results').html('You clicked ' + counter + ' times.');
               
            });
            
        });

    </script>

</body>
</html>
Please login/signup to get access to the terminal.

Your session has timed out.

Dismiss (the page may not function properly).