CODEWITHSUNDEEP
jqueryhtmleventsdom
JustJon
JustJon

Reputation: 131

How do I find which jQuery event is being called when I click a textbox?

I've inherited a piece of software and in it is a form where I cannot figure out where the click event is in jQuery.

When the user clicks in a textbox on the form, the checkbox next to it toggles using a jquery call that I cannot seem to find. I've searched the associates .js files and for the life of me I cannot find it.

Are there any tools, tips or tricks I can use to find what is being called to trigger the click event, so that I can alter/deactivate it?

Below is a sample of the markup around the form:

<li>
    <input type="checkbox" name="checkbox_other1" id="checkbox_other1" value="checkbox_other1" />
    <label for="checkbox_other1">Other <input type="text" id="textfield_other1" name="textfield_other1" size="35" maxlength="35">.</label>
</li>
<li>
    <input type="checkbox" name="checkbox_other2" id="checkbox_other2" value="checkbox_other2" />
    <label for="checkbox_other2">Other <label for="checkbox_other2">
        <input type="text" id="textfield_other2" name="textfield_other2" size="35" maxlength="35">.
    </label>
</li>

Thanks.

SOLUTION So it seems I was thinking too high level. It wasn't jquery/javascript that was causing the issue, but it was the label tags that was attaching the textfield to the checkbox. Thanks for all the assistance.

Upvotes: 5

Views: 1713

Answers (3)

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

Visual Event is very handy tool to find events on webpage.

You can bookmark it and then use on any webpage.

Also available as chrome extension.

Upvotes: 4

Sandy Gifford
Sandy Gifford

Reputation: 8136

Don't know why this took me so long to realize, but you can print the onclick handler directly:

<html>
    <head>
        <script>
            function thisiswhyimhot()
            {
                alert("this is why you're not");
            }

            function mybodyisready()
            {
                alert(document.getElementById("hottestdivever").onclick);
            }
        </script>
    </head>
    <body onload="mybodyisready()">
        <div id="hottestdivever" onclick="thisiswhyimhot()"></div>
    </body>
</html>

Will Pop up an alert with the following:

function onclick(event) {
thisiswhyimhot()
}

If the handler was set with JQuery it's stored in a slightly different fashion:

alert(jQuery._data(document.getElementById("hottestdivever"), "events").click[0].handler);

That will give you something to search for in your JS.

And finally, a JSFiddle demoing both the vanilla Javascript and jQuery methods.

In other news, I have a new function name for every body onload I write from now until the end of time...

Upvotes: 0

Mayank Awasthi
Mayank Awasthi

Reputation: 337

try event.type

$("#test").on("click change", function(event){
    alert(event.type + " is fired");
});

Upvotes: -2

Related Questions