javascript - 无法在 jQuery Mobile 中更改样式

标签 javascript jquery html css jquery-mobile

无法更改样式,当使用 $(this).addClass('errorClassText') in jQuery mobile 时。 我真的需要使用 $(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>

最佳答案

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

如果您在 click 函数内部和 keyup 函数外部添加一个控制台日志,并且还在 keyup 函数内部添加一个不同的控制台日志,您应该能够看到什么被触发以及何时(我不会'根本不认为 keyup 函数被触发了)。

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

试试这个:

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

关于javascript - 无法在 jQuery Mobile 中更改样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19974483/

相关文章:

javascript - 错误: 508 (Loop detected)

javascript - 如何在 JavaScript 中将 id 放入警报中

javascript - 在自定义授权期间强制 ajax .fail() 来管理登录重定向

jquery - 当页面加载到除第一个实例之外的所有实例上时更改 CSS 值

javascript - AJAX不会发送POST数据

javascript - Bootstrap Popover - 显示在底部

javascript - 奇怪的异步代码行为

javascript - Knockout JS 值未显示/绑定(bind)/更新但可通过 ko.toJS($data).value

javascript - 在 Javascript webresource CRM 中传递统一服务台上下文参数值

html - 缩短底部边框长度