Question

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

<!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错误，但我想用纯粹的选择器做它。但是，如果不可能，我很高兴有人能解释我原因。

由于

Answer 1

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

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

Answer 2

使用以下内容：

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

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

Answer 3

在您的情况下，JQuery在加载文档/ 准备好之后将事件处理程序添加到选定的DOM-Element。它找不到具有属性＆＃34; readonly＆＃34;的元素。所以，不会添加任何事件处理程序。

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

尝试这样的事情：

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

修改元素属性后Jquery选择器不工作

3 个答案: