当我更改选项卡时，无法触发 Jquery 事件以在文本框上显示工具提示

Question

我有几个表格需要用户填写，它们被设置为多个选项卡（使用引导选项卡）。所以我有 Tab1 和 Tab2。当页面加载时，用户从 Tab1 开始，输入他们的信息，然后转到 Tab2。在 Tab2 上，我有一个文本框字段，询问他们平均每天锻炼了多少分钟。此字段仅允许用户输入数字，因此我无需担心验证他们输入的内容，他们只能输入数字。所以他们可以在框中输入数字，当他们尝试输入任何大于 1440 的数字时，他们会被阻止输入该值，并且他们会得到一个工具提示，告诉他们不能输入大于 1440 分钟的值，即 24小时。

问题在于触发工具提示的 Jquery 事件。当用户第一次转到 Tab2 时，工具提示完全按预期工作。但是假设用户返回 Tab1 进行检查，然后返回 Tab2，然后尝试在文本框中输入分钟，工具提示不再触发，并且他们能够输入大于 1440 的值。下面是检查的 Jquery 事件文本框的值并触发工具提示：

$(".tbModerateActivity").bind('keydown', function (e) {
    if (e.keyCode == '9' || e.keyCode == '16') {
        $(this).tooltip('destroy');
        return;
    }
    var code;
    var textBoxValue = $(this).val() + (String.fromCharCode(e.keyCode));

    if (e.keyCode) code = e.keyCode;
    else if (e.which) code = e.which;
    if ((code > 47 && code < 58) && (parseInt(textBoxValue) > 1440)) {
        $(this).tooltip('show');
        return false;
    } else {
        $(this).tooltip('destroy');
    }
    if (e.which == 46) {
        $(this).tooltip('destroy');
        return false;
    }
    if (code == 8 || code == 46) {
        $(this).tooltip('destroy');
        return true;
    }
    if (code < 48 || code > 57) {
        if ((code > 47 && code < 58) && (parseInt(textBoxValue) > 1440)) {
            $(this).tooltip('show');
        } else {
            $(this).tooltip('destroy');
        }
        return false;
    }
});

如您所见，例如，当用户输入一个值 144，然后按 9 键，即 1449 的值时，代码获取文本框的当前值，并添加按下它的键，然后检查该数字是否太大。在这种情况下，它会触发工具提示，然后返回 false，从而阻止将 9 数字实际输入到文本框中。

任何人都可以帮助解释为什么当我从标签页切换到带有此表单的标签页然后再切换回标签页时此触发器不再触发吗？尽管我不确定，但我所做的唯一可能会影响它的是表单底部有一个保存按钮。当用户单击选项卡转到表单时，我会保存表单的副本，例如

tab2Form = $('#tab2Form).html();

当用户按下保存按钮时，名为“Tab2Saved”的变量设置为 true，因此当他们将选项卡从 Tab2 更改为关闭时，会检查此变量。如果它是假的，那么用户会被警告他们没有保存数据，并且可能会丢失它，他们是否希望继续。如果他们按 OK，然后我将表单重置为以前的状态（表单上可能已经保存了以前的数据），如下所示：

 $('#tab2Form).html(tab2Form);

以防万一它可以帮助您解决我的问题，这里是 HTML（在 Razor 语法中，我使用 C# 在 Visual Studio 上使用 MVC4）：

<td style="width: 7%">
    @Html.TextBoxFor(model => model.ExerciseHistoryViewModel.ModerateActivityMon, new
             {
                  @data_placement = "bottom", 
                  @data_toggle = "tooltip", 
                  @data_original_title = "Value cannot be greater than 1440 minutes(24 hours)!", 
                  @class = "form-control tbModerateActivity numericOnly",
                  @style="float: left",
                  @id="ModerateActivityMon"
              })
</td>

有人能帮我解决这个问题吗？我已经检查了页面本身的文本框，在更改选项卡之前和之后，它根本没有任何变化。并且该脚本仍在工作，因为页面上的其他功能仍在同一脚本文件中触发。有人有什么想法吗？

Answer 1

没关系，我想通了。而不是使用

$(".tbModerateActivity").bind('keydown', function (e) {

我用过

$('body').on('keydown', ".tbModerateActivity", function (e) {

这解决了问题。