Having trouble firing Jquery event to show a tooltip on a textbox when I change tabs

Question

I have a couple of forms I need a user to fill out, which are set into several tabs (using bootstrap tabs). So I have Tab1 and Tab2. When the page loads, the user starts on Tab1, enters their information, then goes to Tab2. On Tab2, I have a textbox field which asks how many minutes of exercise to they do, on average, each day. This field only enables the user to input numbers, so I don't need to worry about validating what they enter, they can only enter numbers. So they can enter numbers into the box, and when they try to enter any number greater than 1440, they are prevented from entering that value, and they get a tooltip, telling them then cannot enter a value larger than 1440 minutes, which is 24 hours.

The problem lies in Jquery event which triggers the tooltip. When the user first goes to Tab2, the tooltip works completely as expected. But say the user returns to Tab1 to check something, then goes back to Tab2 and then tries entering minutes in the textbox, the tooltip no longer fires, and they are able to enter a value greater than 1440. Below is the Jquery event which checks the value of the textbox and fires the tooltip:

$(".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;
    }
});

So as you can see, when a user enters a value of 144, for example, and then goes to press the 9 key, which will be a value of 1449, the code gets the current value of the textbox, and adds the key that was pressed to it, then checks if that number will be too large. In this case it is, so it will fire the tooltip, and then returns false, preventing the 9 number from actually being entered into the textbox.

Can anybody help explain why this trigger no longer fires when I switch tabs away from and then back to the tab with this form on it? The only thing I do that could be affecting it, although I'm not sure, is that there is a save button at the bottom of the form. When the user clicks on the tab to go to the form, I save a copy of the form, eg

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

When the user pressed the save button, a variable called "Tab2Saved" is set to true, so when they change tab off Tab2, this variable is checked. If it's false, then the user is warned that they haven't saved the data, and may lose it, do they wish to proceed. If they press OK, then I then reset the form to what it previously was (there may already have been previously saved data on the form), like so:

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

Just in case it may help you solve my problem, here is the HTML (in Razor syntax, I'm using MVC4 on Visual Studio with C#):

<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>

Anybody able to help me with this problem? I've inspected the textbox on the page itself, before and after changing the tab, and nothing changes with it at all. And the script is still working, because there are other functions on the page that are within the same script file that still fire. Anyone any ideas?

Answer 1

Doesn't matter, I figured it out. Instead of using

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

I used

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

This fixed the problem.