articles

Home / DeveloperSection / Articles / Delegate Method Using JQuery

Delegate Method Using JQuery

Vijay Shukla 4775 05-Dec-2012

In this article, I have tried to explain use of Delegate method with jQuery.

The delegate () method use for handle a single event for different control such as if you have many control in your HTML page like (button, hyperlink, radio button, checkbox and etc) and you want to fire common event on the click of any control, then we will use the delegate () method and this delegate () method will work for both controls current as well as future (like a new element created by a script).

Syntax:-
$(selector).delegate( childSelector, event, data, function)
jQuery Selectors

Through the jQuery Selectors we can select and frame up HTML element(s).it will help to find elements based on their id, classes, types, , attributes, values of attributes and much more. It is based on the existing CSS Selectors, and in addition, it has some own custom selectors. Any type of selectors in jQuery start with the dollar sign and parentheses: “$()”.The jQuery element selector selects elements based on their tag names.

i.e.
$("input").on("click", function () {alert(“You Clicked on Input Tag”);}
Sr.
Parameter
Description

1

childSelector

Specify one or more child controls to attach the event handler

this parameter is necessary.

2

Event

Specify one or more Events to attach the controls and multiple Events values by separating the space but events should be valid this parameter is necessary.

3

data

This parameter is optional it will give the additional data pass for the function.

4

function

Specifies the function to run when the event occurs this parameter is necessary.

 Example:

I will take an example for illustrate the Delegate method in jQuery.

In this example I have many controls (input, hyperlink, comboBox and image) and if I click on any control will execute a single event function and will show an alert message. And you must have jquery file in your home directory.

Delegate Method Using JQuery

And this example will give the below output.

Delegate Method Using JQuery

My HTML Code:
<table border="1px">

        <tr>
                <td><input type="button" id="btnButton1" value="Button1" /></td>
                <td><input type="button" id="btnButton2" value="Button2" /></td>
        </tr>
        <tr>
                <td>a href="#">HyperLink1</a></td>
                <td> <a href="#">HyperLink2</a> </td>
        </tr>
        <tr>
            <td>select>
                    <option value="up">U.P</option>
                    <option value="mp">M.P</option>
                    <option value="hp">H.P</option>
                    <option value="jk">J&K</option>
                </select>
            </td>
            <td>
                <select>
                    <option value="ald">Allahabad</option>
                    <option value="rewa">Rewa</option>
                    <option value="kanpur">Kanpur</option>
                    <option value="noida">Noida</option>
                </select>
            </td>
        </tr>
        <tr>
<td><img src="twitter.png" alt="twitter" width="42" height="42"></td>
</tr>
    </table>

 My jQuery Code:

<script src="jquery-1.7.1.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("input").on("click", function () {
            var message = "Click :" + $(this).val();
             alert(message);
        })
        $("a ").on("click", function () {
            var message = "Click :" + $(this).text() ;
            alert(message);
        })
        $("option").on("click", function () {
            var message = "Select :" + $(this).text();
            alert(message);
        })
         $("img").on("click", function () {
            alert("image");
        })
    });
</script>

 


Updated 07-Sep-2019

Leave Comment

Comments

Liked By