修改元素属性后，Jquery 选择器不起作用

Jquery selector not working after element attribute is modified

本文关键字：Jquery 选择器 不起作用 元素 属性 修改      更新时间：2023-09-26

我有一个文本输入和一个按钮输入。如果我单击文本输入，并且它不是只读的，则会显示警报"只读错误"，否则显示"只读真"。按钮输入使文本输入只读，但当我单击文本输入时，"只读错误"仍然继续显示。看起来 Jquery 在通过脚本添加只读属性后无法识别选择器。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Documento sin título</title>
        <script type="text/javascript" src="jquery/jQuery v1.10.2.js"></script>
        <script>
            $(document).ready(function() {
                $('.makeReadonly').on('click', function() {
                    $('.foo').prop('readonly', true);
                });
                $('input.foo:not([readonly])').on('click', function() {
                    alert('Readonly false');
                });
                $('input.foo[readonly]').on('click', function() {
                    alert('Readonly true');
                });
            });
        </script>
    </head>
    <body>
        <input type="button" value="makeReadonly" class="makeReadonly">
        <input type="text" class="foo">
    </body>
</html>

我可以使用纯粹的选择器触发正确的警报，或者我需要使用 if 语句（if （$（'.foo'）.prop（'readonly'）） {alert（'Readonly true'）}）进行验证评估属性？

对我来说，这似乎是一个 Jquery 错误，但我想用纯粹的选择器来处理它。但是，如果不可能，我很高兴有人可以解释我为什么。

谢谢

代码在查询执行时查找适合特定选择器的元素，并将事件处理程序绑定到这些元素。如果要将处理程序绑定到在事件发生时适合选择器的元素，请使用事件委派：

$(document).on('click', 'input.foo:not([readonly])', function () {
    // ...
});

使用以下命令：

$('input.foo').on('click',function(){
    if($(this).is('[readonly]')) alert('Readonly true');
    else alert('Readonly false');
});

使用旧代码，click 事件被绑定到元素，其readonly依赖于其初始值。这样，readonly的值就会在每个click上检查。

在您的情况下，JQuery 会在文档加载/准备就绪后将事件处理程序添加到选定的 DOM-Element 中。它找不到属性为"只读"的元素，因此不会添加任何事件处理程序。

若要绕过此操作，必须使用全局标识符将事件处理程序添加到已更改的元素中。你已经在这个方向上提出了一些建议。

尝试这样的事情：

<script>
$(document).ready(function() {
    $('.makeReadonly').on('click', function() {
        $('.foo').prop('readonly', true);
    });
    $('input.foo').on('click', function() {
        if ($(this).prop('readonly'))
        {
            alert('Readonly true');
        } else
        {
            alert('Readonly false');
        }
    });
});
</script>
相关文章：