Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Passing data to event handler in jQuery

Suggested Videos
Part 32 - jQuery to detect which mouse button clicked
Part 33 - Binding event handlers in jquery
Part 34 - Binding event handlers using jquery on method

In this video we will discuss how to pass data to the event handler function in jQuery

The following example, 
1. Binds the click event handler to the button using on function
2. We are passing 3 arguments to the on() function
    a) The name of the event
    b) JSON object that contains data that we want to pass to the event handler
    c) Event handler method name
3. In the event handler method (sayHello), we access the data using event object's data property.

    <script src="jquery-1.11.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#btnClickMe').on('click', {
                firstName: 'John',
                lastName: 'Doe'
            }, sayHello);

            $('#btnClickMe').on('click', {
                firstName: 'Mary'
            }, sayHello);

            $('#btnClickMe').on('click', sayHello);

            function sayHello(event) {
                if ( == null) {
                    alert('No name provided');
                else {
                    alert('Hello ' + +
                        ( != null ? ' ' + : ''));
<body style="font-family:Arial">
    <input id="btnClickMe" type="button" value="Click Me" />

Output : 
Hello John Doe
Hello Mary
No name provided

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.