首页 文章

在更改标签时,无法触发Jquery事件以在文本框上显示工具提示

提问于
浏览
0

我有几个表单需要用户填写,这些表单设置为几个选项卡(使用引导选项卡) . 所以我有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,因此当他们将Tab键更改为Tab2时,将检查此变量 . 如果它是假的,则警告用户他们没有保存数据,并且可能丢失它,他们是否希望继续 . 如果他们按OK,然后我将表单重置为以前的表单(可能已经存在以前在表单上保存的数据),如下所示:

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

为了防止你解决我的问题,这里是HTML(在Razor语法中,我在Visual Studio上使用带有C#的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>

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

1 回答

  • 0

    没关系,我明白了 . 而不是使用

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

    我用了

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

    这解决了这个问题 .

相关问题