javascript - e.preventDefault()的行为有所不同

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

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

使用jQuery，我将上述文本框设置为true / false只读。只读和值是根据用户选择的复选框设置的，该函数看起来像

 function checkBoxes() {
    var $targetCheckBoxes = $("#BoxFailure,#InstallationFailure");
    $targetCheckBoxes.change(function () {
        var isChecked = this.checked;
        var currentElement = this;
        var $radioButton = $('.usage-failure-type-radio');
        $targetCheckBoxes.filter(function () {
            return this.id !== currentElement.id;
        }).prop('disabled', isChecked);
        $('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked);
        $radioButton.first().prop('checked', isChecked);
        $radioButton.not(':checked').toggle(!isChecked).parent('label').toggle(!isChecked);
        $('.usage-before-failure > div > span.ui-spinner > a').toggle(!isChecked);
    });
}

现在我想实现的是#spinner输入是只读的，并且如果用户按下退格键，我想防止默认行为，例如离开页面。为此，我认为我会执行以下操作：

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

如果输入在页面加载时具有类prevent-default，则该方法运行良好。但是，如果我在下面的checkBoxes函数中添加它

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

然后我按退格键，它会忽略e.prevenDefault();

但是如果我这样做

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

然后就可以了。

有人可以告诉我为什么会这样。

我想使用带有类名的单独函数的原因是因为我有各种输入，这些输入被设置为仅基于不同的检查/无线电值进行读取。

最佳答案

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


这是由于DOM解析器和执行JavaScript的时间所致。

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

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

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