修改元素属性后jQuery选择器不起作用答案

【问题标题】：Jquery selector not working after element attribute is modified修改元素属性后jQuery选择器不起作用
【发布时间】：2014-11-23 17:33:38
【问题描述】：

我有一个文本输入和一个按钮输入。如果我单击文本输入，并且它不是只读的，则会显示警报“Readonly false”，否则会显示“Readonly true”。按钮输入使文本输入只读，但当我单击文本输入时，'Readonly false' 仍然显示。通过脚本添加只读属性后，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 错误，但我想用纯粹的选择器来处理它。但是，如果不可能，我很高兴有人能解释我为什么。

谢谢

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

使用以下内容：

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

使用您的旧代码，click 事件被绑定到具有 readonly 的元素，具体取决于它们的初始值。这样，readonly 的值就会在每个 click 上进行检查。

【讨论】：

【解决方案3】：

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

要绕过这一点，您必须将事件处理程序添加到具有全局标识符的已更改元素。你已经在这个方向提出了一些建议。

试试这样的：

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

【讨论】：