JQuery的OnChange函数不触发

Question

I am using JQuery 1.8.16. 我正在使用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. 因此，我在这些用户控件所在的父页面中使用JQuery的Onchange事件。 Here's my JQuery code 这是我的JQuery代码

 $('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. 首先，我没有捕获页面上用户控件的任何文本框，下拉列表或TextArea所做的任何编辑。 Secondly, I place another Method similar to this to test in documen.ready function as follows 其次，我在documen.ready函数中放置了与此类似的另一个方法，如下所示

//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? 关于为什么会发生任何积极的想法？

Answer 1

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). 您不会显示任何页面源，也不会提及您的JavaScript是在单独的.js文件中，还是在<script>块中的页面中，以及是否出现在页面中（这很重要）。 I generally recommend keeping page, script, and style separate, linking the .js and .css files as appropriate in the page source. 我通常建议将页面，脚本和样式分开，并在页面源中适当地链接.js和.css文件。

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. 正如我在评论中提到的那样，如果在构建DOM之前运行javascript，则处理程序可能无法附加到您要定位的控件上，因此这些控件尚不存在。 Since you're using jQuery you want to use its .ready() function to wait until the DOM is built ("ready") before attaching handlers. 由于您使用的是jQuery，因此您想使用其.ready()函数来等到DOM构建完成（“就绪”）之后再附加处理程序。

Basically[1], you just wrap your code in an anonymous function that gets called when ready . 基本上[1]，您只需将代码包装在一个匿名函数中，该函数在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. [1]“基本上”-但要做的更多。 I'm not going to attempt a full tutorial here since there are already many questions here on SO that discuss issues surrounding it. 我不会在这里尝试完整的教程，因为关于SO的问题已经很多，围绕它的问题进行了讨论。

(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. 假设这些类型为默认类型，HTML5不需要type="text/javascript"或type="text/css" 。 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. 我提到这一点是为了避免页面和代码片段上的所有挑剔行为，但是人们还是觉得需要做些事情。

JQuery的OnChange函数不触发

问题描述

1 个解决方案

解决方案1
0 2015-07-08 17:39:47

JQuery的OnChange函数不触发

问题描述

1 个解决方案

解决方案1 0 2015-07-08 17:39:47

解决方案1
0 2015-07-08 17:39:47