Question

我有一个非常简单的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">

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

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

然后它绝对正常。

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

我想使用带有类名的单独函数的原因是因为我有各种输入，它们被设置为只根据不同的检查/无线电值读取。

Answer 1

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

这是因为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...
        });
}

e.preventDefault（）与众不同

1 个答案: