OnChange function for JQuery not firing

Question

I am using JQuery 1.8.16. I have many user controls on the Page and wanna catch the edits for those if any. So, I am using Onchange event of JQuery in the Parent Page on which these User Control reside. Here's my JQuery code

 $('input[type=text], input[type=file], textarea, select').on("change", function () {
            var ctrl = $(this).attr('id');
            if (ctrl.indexOf("ddlLibrary") != -1) {
                needSave = false;
                unlock = true;
                UnlockRequest(null);
            }
            if (ctrl != null && ctrl != "") {
                if (ctrl.indexOf("GeneralInformationControl") != -1
                  || ctrl.indexOf("PartDetailsControl") != -1
                  || ctrl.indexOf("UserInformationControl") != -1
                  || ctrl.indexOf("AttachmentControl") != -1) {

                    if (ctrl.indexOf("lbAttachments") != -1 || ctrl.indexOf("tbAttachmetnDesc") != -1 || ctrl.indexOf("FileUpload1") != -1) {
                        needSave = false;
                        window.onbeforeunload = routeUnlock;
                        unlock = true;
                    }
                    else {
                        needSave = true;
                        window.onbeforeunload = confirmExit;
                        unlock = true;
                    }
                }
            }
        });

Firstly, I doesn't catch any edits that happen for any textbox, dropdown or TextArea of my User controls on page. Secondly, I place another Method similar to this to test in documen.ready function as follows

//JQuery Function to Call Lock Method on Editing any of the User Controls on Request Page
        var locked = false;
        $("input,select,textarea").change(function () {
            if (!locked) {
                $.ajax({
                    type: "POST",
                    url: "WebForm1.aspx/methodInServer",
                    contentType: "application/json; charset=utf-8",
                    success: function (msg) {
                        locked = true;
                        alert(msg.d);
                    }
                });
            }
        });
    });

I put breakpoints on in these functions and I am surprised none of the break points are hit and my changes to fields in the User controls are not being caught. Any positive ideas about why this happening?

This page is a content page of a master page which have a form tag. So I guess they get attached to generated html. I am not sure though as I am very new to jquery — Programmerzzz, Jul 08 '15 at 00:57
You are not showing us your code that actually has the `$(document).ready(...)` in it. As far as I can tell you are attempting to attach handlers to controls that don't exist yet. — Stephen P, Jul 08 '15 at 00:58
So you need to use event delegation or attach the events when the new content is added to the page. http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — epascarello, Jul 08 '15 at 00:58
@Stephen P : How can we say that? I can see the generated controls in my UserControl on the Page and html on the Page. I see , and many <select> in my generated DOM. Since my Java Script is with in </select>
tag . All the elements should be created by that time this JQuery loads. pls clear If i am confused — Programmerzzz, Jul 08 '15 at 01:12

score 0 · Answer 1 · answered Jul 08 '15 at 17:39

You don't show any page source or mention whether your javascript is in a separate .js file or in the page in a <script> block, and if in the page where it appears (it matters). I generally recommend keeping page, script, and style separate, linking the .js and .css files as appropriate in the page source.

As I mentioned in a comment, your handlers could fail to attach to the controls you're targeting if the javascript is running before the DOM has been built, so the controls don't exist yet. Since you're using jQuery you want to use its .ready() function to wait until the DOM is built ("ready") before attaching handlers.

Basically[1], you just wrap your code in an anonymous function that gets called when ready.

In your page head pull in your script file...

<!-- file: mypage.??? -->
<head>
    <title>My Page</title>
    <link rel="stylesheet" type="text/css" href="mystyles.css">
    <script type="text/javascript" src="myscripts.js"></script>
</head>

The script file contains your code, wrapped in the function that gets called on ready...

// file: myscripts.js
$(document).ready(
    function() {

        // Your original code goes here...
        $('input[type=text], input[type=file], textarea, select')
            .on("change", function () {
                var ctrl = $(this).attr('id');
                if (ctrl.indexOf("ddlLibrary") != -1) {
                    needSave = false;
                    unlock = true;
                    UnlockRequest(null);
                }
                if (ctrl != null && ctrl != "") {
                    // etc.
                }
                // more of your code
            });

    } // end of anonymous "ready" function
);

[1] "Basically" — but there can be more to doing this. I'm not going to attempt a full tutorial here since there are already many questions here on SO that discuss issues surrounding it.

(disclaimers)

Without more information I can only guess that your handlers aren't being attached. This addresses one possibility, but if this doesn't help I'm going to delete this answer.
HTML5 doesn't require the type="text/javascript" or type="text/css", assuming those types as the default. I mention this to try to avoid all the nitpicking that's possible on page & code fragments, but people feel some need to do anyway.

HI Stephen, Thanks for the Input, what kind of more info you need. The Script is in a — Programmerzzz, Jul 08 '15 at 19:10
@Programmerzzz - at the point the JS is running the content-page/master-page doesn't matter any more... that has been processed and plain HTML is sent to the browser. I suggest creating a fiddle (jsfiddle.net) with simpler HTML content (and put the ` — Stephen P, Jul 08 '15 at 19:20

OnChange function for JQuery not firing

1 Answers1