2014-11-23 68 views
1

我有一个文本输入和一个按钮输入。如果我点击文本输入,并且它不是只读的,则显示'Readonly false'警报,否则显示'Readonly true'。按钮输入使得文本输入只读,但是“只读假”仍然保持显示,当我点击文本输入时。看起来像jquery不识别选择器后通过脚本添加readonly属性。修改元素属性后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语句属性(如果($(“富‘)。支撑(’只读”)){警报( 'Readonly true')})?

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

感谢

回答

2

你的代码发现在查询执行的时间的特定选择锁合元件和结合事件处理程序的那些元素。如果你要绑定的处理程序,以适合在事件发生时选择的元素,使用event delegation

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

使用以下命令:

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

与您的旧代码时,click事件被绑定到元素与readonly依赖于他们的初始值。这样,每click上检查readonly的值。

0

在你的情况jQuery是该文件被加载后,一旦添加事件处理程序选定的DOM-元/ 已准备就绪。它没有找到具有“readonly”属性的元素,所以不会添加事件处理程序。

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

尝试这样:

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