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

Question

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

其他所有内容均按预期工作 - input 已隐藏，仅显示附加的 div。
但是，对于屏蔽的文本框，显示了 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 语句。

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

Answer 1

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

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

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

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

Excluding on JQuery selector correct in console, code still runs

javascript

jquery

jquery-selectors

kendo-ui

kendo-asp.net-mvc