Question

我正在使用JQuery 1.8.16。我在页面上有许多用户控件，并希望捕获那些（如果有的话）的编辑。所以，我在这些用户控件所在的父页面中使用JQuery的Onchange事件。这是我的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;
                    }
                }
            }
        });

首先，我没有抓住对我的用户控件的任何文本框，下拉列表或TextArea进行的任何编辑。其次，我将另一个类似的方法放在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);
                    }
                });
            }
        });
    });

我在这些函数中放置了断点，我很惊讶没有任何断点被击中，我对用户控件中字段的更改没有被捕获。关于为什么会发生这种情况的任何积极想法？

Answer 1

您不会显示任何网页来源或提及您的javascript是在单独的.js文件中还是在<script>块中的页面中，以及是否在其显示的页面中（这很重要）。我通常建议将页面，脚本和样式分开，并在页面源中根据需要链接.js和.css文件。

正如我在评论中提到的，如果在构建DOM之前javascript正在运行，您的处理程序可能无法附加到您要定位的控件上，因此控件尚不存在。由于您正在使用jQuery，因此您希望在附加处理程序之前使用其.ready()函数等待构建DOM（＆＃34;准备好＆＃34;）。

基本上[1]，您只需将代码包装在一个匿名函数中，该函数在 ready 时被调用。

在你的页面头中拉入你的脚本文件......

<!-- 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>

脚本文件包含您的代码，包含在准备调用的函数中...

// 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]＆＃34;基本上＆＃34; - 但是可以做更多这样的事情。我不打算在这里尝试一个完整的教程，因为这里有很多关于SO的问题，讨论围绕它的问题。

（声明）

如果没有更多信息，我只能猜测您的处理程序没有被附加。这解决了一种可能性，但如果这对我没有帮助，我将删除此答案。
HTML5并不需要type="text/javascript"或type="text/css"，假设这些类型为默认值。我提到这一点是为了尽量避免在页面和页面上可能出现的所有挑剔行为。代码片段，但人们觉得有些事情需要做。

JQuery的OnChange函数没有触发

1 个答案: