0

我正在使用 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);
                    }
                });
            }
        });
    });

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

4

1 回答 1

0

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

正如我在评论中提到的，如果 javascript 在构建 DOM 之前运行，您的处理程序可能无法附加到您的目标控件，因此控件尚不存在。由于您使用的是 jQuery，因此您希望使用它的.ready()功能等到 DOM 构建完成（“就绪”），然后再附加处理程序。

基本上[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] “基本上”——但可以做更多的事情。我不打算在这里尝试完整的教程，因为这里已经有很多关于 SO 的问题讨论围绕它的问题。

（免责声明）

  1. 如果没有更多信息，我只能猜测您的处理程序没有被附加。这解决了一种可能性，但如果这没有帮助，我将删除此答案。
  2. HTML5 不需要type="text/javascript"or type="text/css"，假设这些类型是默认的。我提到这一点是为了避免在页面和代码片段上可能出现的所有吹毛求疵，但人们还是觉得有必要这样做。
于 2015-07-08T17:39:47.037 回答