Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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

It would be great if you can help share these free resources