Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Event binding on dynamically created elements?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 48
    Comment on it

    Suppose your page is creating elements dynamically with the class name egSample, you need to bind the event to a parent which already exists.

    You need to use the .on() method to implement this task. Here is the syntax of how to use it :-

    .on( events [, selector ] [, data ], handler )

    or

    $(staticAncestors).on(eventName, dynamicChild, function() {})

    This method attaches event handlers and adds functionality to currently selected elements.

    Below is the code to use this method :-

    $(document).on('mouseover mouseout', '.egSample', function(){
        // what you want to happen when mouseover and mouseout 
        // occurs on elements that match '.egSample'
    });
    

    Here is another example to show the use of this method for dynamically created elements. The parent must exists at the time the event is bound.

    $('.btn').on('click', 'button', function(){
        // some code
    });
    

    This would apply to :-

    <div class="btn">
        <!-- <button>s that are generated dynamically and added here -->
    </div>
    

 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: