Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to bind onclick event function in JQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.35k
    Comment on it

    In the example below, I have created a bind onclick event function. when we will click on the button, element will dynamically added to DOM and it will bind the click event only to the elements that exist at the time of binding. To bind the click event to all existing and future elements, use the jQuery on() method.

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title> Bind onclick Event .</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button").click(function(){
                $("ol").append("<li>New Element<a href='javascript:void(0);' class='remove'>&times;</a></li>"); 
            });
            $(document).on("click", "a.remove" , function() {
                $(this).parent().remove();
            });
        });
    </script>
    </head>
    <body>
        <button>Add new list Element</button>
        <p>click on button dynamically added a new list Item.If you want to remove element till you can remove it easily.<p>
    
    
        <ol>
            <li>Element one</li>
           <li>Element two</li>
            <li>Element three</li>
             <li>Element four</li>
        </ol>
    </body> 
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: