Question: I have a text input and a button input. If i click over the text input, and it is NOT readonly, the alert 'Readonly false' shows, otherwise 'Readonly true'. The button input makes the text input readonly, but 'Readonly false' still keeps showing when i click the text input. Looks like Jquery doesnt recognize selector after readonly attribute is added via script.

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

```

Can i fire the correct alert using purely selectors or i need to do a validation evaluating the attribute with if statement (if ($('.foo').prop('readonly')) {alert('Readonly true')})?

To me it seems to be a Jquery bug, but i want to do with it with purely selectors. However if it is not possible i do be glad someone can explain me why.

Thanks

Answer: 
Your code finds elements fitting the particular selector *at the time of query execution* and binds event handler to those elements. If you want to bind handler to elements that fit a selector at the time of event, use [event delegation](http://learn.jquery.com/events/event-delegation/):

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

```
In your case JQuery is adding the event handler to the selected DOM-Element once after the document is loaded / *is ready*. It does't find an element with the attribute "readonly" an so, no event handler will be added.

To bypass this you must add the event handler to the changed elements with a global identifier. You already suggested something in this direction.

Try something like this:

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

```