CODEWITHSUNDEEP
javascriptjqueryhtml
Neel
Neel

Reputation: 625

Jquery bind click event to all form fields using delegate

This is my HTML

<div class="dc2-contact-cont" selectedindex="1" id="contact-form-applet">
<div class="dc2-ltfc">
    <div class="dc2-ltfcs">A
        <br>
    </div>
    <div role="row" class="dc2-ltfcc" id="0">
        <p><span class="dc2-ltf-span" id="SIO_Contact_First_Name_Label">First Name</span>
            <br>
            <input type="text" aria-labelledby="SIO_Contact_First_Name_Label" id="0_SIO_Contact_First_Name" name="s_5_2_30_0" class="dc2-ltf-input" value="555" aria-readonly="false">
        </p>
    </div>
</div>
<div class="dc2-ltfc">
    <div class="dc2-ltfcs">B
        <br>
    </div>
    <div role="row" class="dc2-ltfcc" id="1">
        <p><span class="dc2-ltf-span" id="SIO_Contact_First_Name_Label">First Name</span>
            <br>
            <input type="text" aria-labelledby="SIO_Contact_First_Name_Label" id="1_SIO_Contact_First_Name" name="s_5_2_30_0" class="dc2-ltf-input" value="4444">
        </p>
    </div>
</div>

I need to bind click event to all the input controls inside div but I am not able to find the right selector.

I tried following expression but it didn't work

$('.dc2-ltfcc p').delegate("input[type=text], textarea",
    "click", {
        ctx: this
    },
    function(event){
        console.log("clicked");             
    });

Here is a link to jsFiddle where I tried to use find to get the right selector but I am not able to select even the div.

jsFiddle

Upvotes: 0

Views: 823

Answers (3)

Milind Anantwar
Milind Anantwar

Reputation: 82241

Using on:

$("#contact-form-applet").on("click","input",function() {
alert('test');
});

Working Demo

Using delegate:

$( "#contact-form-applet" ).delegate( "input", "click", function() {
alert('test');
});

Working Demo

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10378

Use on()

The .on() syntax is the new syntax that version 1.7 uses and it is meant to substitute .bind(), .delegate() and .live().

for more ->http://blog.jquery.com/2011/11/03/jquery-1-7-released/

$("#contact-form-applet").on('click','input',function() {

// your desire action     
});

Upvotes: 0

Felix
Felix

Reputation: 38102

You can do like this:

$('.dc2-ltfcc p').on('click','input',function() {
     console.log("clicked");
});

Note: delegate() is deprecated from version 1.7, you should use on() instead like above.

Upvotes: 1

Related Questions