Javascript e、 preventDefault（）的使用方式不同

我有一个非常简单的jQuery UI微调器，如下所示：

<input value="2" class="form-control ui-spinner-input" id="spinner" aria-valuemin="2" aria-valuemax="24" aria-valuenow="2" autocomplete="off" role="spinbutton" type="text">

现在，我试图实现的是当

#微调器

输入为只读时，如果用户按下back space，我希望防止出现默认行为，例如，从页面导航。为此，我想我应该做以下几点：

$('.prevent-default').keydown(function (e) {
    e.preventDefault();
});

如果输入具有类

在页面加载时阻止默认值，则该选项可以正常工作。但是，如果我将其添加到下一行的
复选框中
函数中

$('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked).toggleClass('prevent-default') 

然后我按下backspace，它忽略
e.prevenDefault（）

但如果我这样做了

$('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked).keydown(function (e) { e.preventDefault(); });

那么它的效果绝对不错

有人能告诉我为什么会这样吗

我想使用具有类名的单独函数的原因是，我有各种输入，这些输入根据不同的check/radio值设置为只读

有人能告诉我为什么会这样吗

这是因为DOM解析器和JavaScript执行的时间

如果在执行JS之前，DOM中已经有一个类为
prevent default
的元素，那么JavaScript将正确识别并处理它。如果之后使用JS添加该类，则必须再次初始化keydown事件以使其正常工作

要重新初始化，您需要以下内容：

function checkBoxes() {
    var $targetCheckBoxes = $("#BoxFailure,#InstallationFailure");
    $targetCheckBoxes.change(function () {
        ...

        $('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked).toggleClass('prevent-default');
        // assign new keydown events
        handleKeyDown();
        ...

    });
}

function handleKeyDown() {
    // release all keydown events
    $('#spinner').off( "keydown", "**" );
    $('.prevent-default').keydown(function (e) {
            e.preventDefault();
            // do more stuff...
        });
}

如何重新初始化keydown事件？但是当用户取消选中复选框时，
handleKeyDown（）
不会激发吗？在这种情况下，是的。如果需要防止出现这种情况，则必须取消设置微调器的keydown事件，然后再次分配它。请参阅更新的答案；-）没有办法切换这个功能吗？好的，没有！只要您不想实现每10毫秒运行一次的setTimout函数，就要检查DOM是否有更改，并相应地作出反应：D
function checkBoxes() {
    var $targetCheckBoxes = $("#BoxFailure,#InstallationFailure");
    $targetCheckBoxes.change(function () {
        ...

        $('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked).toggleClass('prevent-default');
        // assign new keydown events
        handleKeyDown();
        ...

    });
}

function handleKeyDown() {
    // release all keydown events
    $('#spinner').off( "keydown", "**" );
    $('.prevent-default').keydown(function (e) {
            e.preventDefault();
            // do more stuff...
        });
}