时间戳

首页 > 解决方案 > 排除在控制台中正确的 JQuery 选择器，代码仍然运行

javascript - 排除在控制台中正确的 JQuery 选择器，代码仍然运行

问题描述

我正在使用 Kendo 的 Web 应用程序中的表单打印样式。简而言之：在打印之前，我附加<div>包含每个input值的标签，并隐藏input标签。Kendo MaskedTextBox 例外，因为掩码按预期显示数据，其原始值不包含掩码。

它对其他所有东西都按预期工作 - inputs 被隐藏，只显示附加div的 s。
但是，对于被屏蔽的文本框，input显示（正确），但div仍在附加（不正确）。

HTML 结构（从 Edge Dev Tools (F12)复制）：

<div class="mws-form-col-2-8">
    <label>Masked TextBox</label>
    <span class="k-widget k-maskedtextbox" style="width: 100%;">
        <input class="k-textbox" id="maskTest" name="maskTest"
               value="1234567890" data-role="maskedtextbox"
               style="width:100%" autocomplete="off">
        <span class="k-icon k-i-warning"></span>
    </span>
    <script>kendo.syncReady(...)</script>
    <!-- Appended div here: <div class="inputPrint">1234567890</div> -->
</div>

打印 css：

input:not(.k-textbox),
span.k-widget:not(.k-maskedtextbox) {
    display: none!important;
}

Javascript：

此函数绑定到window.onbeforeprint事件，并$(document).ready()在媒体类型为“打印”时调用（Edge/Chrome 可以模拟 css 媒体类型，我正在使用它来调试它）。

function beforePrint() {
    // exclude input.k-textbox
    $("input:not(.k-textbox)").each(function () {
        // exclude input with .k-maskedtextbox parent
        //if (! $(this).parents(".k-maskedtextbox").length) {
        if ($(this).parents(".k-maskedtextbox").length <= 0) {
            // check if the .inputPrint div already exists
            if ($(this).siblings(".inputPrint").length) {
                // set text of existing
                $(this).siblings(".inputPrint").text($(this).val());
            }
            else {
                // append a div displaying its value to its parent
                $(this).parent().append("<div class='inputPrint'>" + $(this).val() + "</div>");
            }
        }
    });
}

如您所见，函数 ( input:not(.k-textbox)) 第一行的选择器与 css 中的选择器相同。

显示：

Masked TextBox          ←- Label
╭────────────────╮
| (123) 456-7890 |      ←- input
╰────────────────╯
╭────────────────╮
| 1234567890     |      ←- appended div
╰────────────────╯

当我试图通过检查控制台中的一些东西来弄清楚这可能是如何发生的时，这就是我得到的：

$("#maskTest").is("input:not(.k-textbox)")
false

$("#maskTest").is(".k-textbox")
true

这个输入甚至不应该包含在.each.

$("#maskTest").parents(".k-maskedtextbox").length
1

$("#maskTest").parents(".k-maskedtextbox").length <= 0
false

如果它被包括在内，它不应该进入第一个if语句。

这是怎么回事，我该如何解决？

标签： javascriptjquerykendo-uijquery-selectorskendo-asp.net-mvc

解决方案

我发现 Kendo MVC 包装器在事件中将输入扩展为 kendo 控件，该kendo.syncReady事件在完成后 $(document).ready运行。

所以在我的初始页面加载时，我检查的输入看起来像这样：

<input id="maskTest" name="maskTest" style="width:100%" value="1234567890" />

推荐阅读