无法在jquery mobile中更改样式

时间:2013-11-14 09:54:32

标签: javascript jquery html css jquery-mobile

在jQuery mobile 中使用$(this).addClass('errorClassText') 时无法更改样式。 我真的需要使用$(this),因为我有几个表单字段,我想要应用验证。有人可以建议我可能出错的地方。

jQuery脚本:

<script>
    $(document).on('pageinit', function(){
        $(".form2 input").click(function() {    
            $(this).keyup(function()
                {
                    $(this).addClass('errorClassText')
                });
        }); 
    });

</script>

带有CSS样式的HTML代码:

<!DOCTYPE html>

<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

<style>
        .errorClassText{
            color: #ff6666;
        }
</style>
</head>

<body> 
<form class='form2' name= "form" action="">       
    <input type="text" name="buildingname" id="house_name" >
    <label id="house_name_error" for= "house_name"></label>
    <input type="text" name="doorno" id="doorno" >
    <label class= "" id="doorno_error" for= "doorno"></label>
    <button type="submit" class="button" id="submit_btn" name="submit" >Submit</button>
</form>

</body>
</html>

2 个答案:

答案 0 :(得分:0)

使用不key up event的{​​{1}},

click

已更新,,如果您想$(document).on('pageinit ready', function(){ $(".form2 input").keyup(function(){ $(this).addClass('errorClassText') }); }); addClass particular input element,请尝试

doorno

答案 1 :(得分:0)

当用户在键盘上释放键时,键盘事件将发送到元素。但是,在您的实例中,您尝试在单击事件中触发(单击.form2输入)。所以我想你的代码当前正在寻找在用户点击字段时键盘上的键的释放。不会发生。

如果你在click函数内部和keyup函数之外添加一个控制台日志,并且还有一个不同的控制台在keyup函数内部记录,你应该能够看到触发的内容以及何时触发(我不会t认为keyup函数正在被触发。

在您的代码片段中似乎没有任何内容可以添加任何内联样式到输入(这将是未应用您的错误样式的另一个原因,因为这些将覆盖分配给新类的样式)

试试这个:

    $(document).on('pageinit ready', function(){
            $(".form2 input").keyup(function(){
                    $(this).addClass('errorClassText')
            });
    });