2013-11-14 3 views
1

Невозможно изменить стиль при использовании $(this).addClass('errorClassText')в jQuery mobile. Мне действительно нужно использовать $ (this), поскольку у меня есть несколько полей формы, где я бы хотел применить проверку. Может кто-нибудь, пожалуйста, предложите, где я могу ошибиться.Невозможно изменить стиль в jQuery mobile

JQuery скрипт:

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

</script> 

HTML код с CSS стайлинга:

<!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> 
+0

Я хотел бы предположить, что добавление класса работает, но правило CSS не достаточно конкретно, по сравнению с включенными таблицами стилей. –

ответ

0

Использование key up event без click как,

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

Обновлено, если вы хотите addClass для aкак doorno затем попробовать,

$('#doorno').on('keyup',function(){ 
    $(this).addClass('errorClassText') 
}); 
+0

Используя приведенный выше код, если в любом из входных элементов есть какое-либо событие keyup, функция выполняется. Это нежелательно. – kurrodu

+1

Да, вы можете, изменив 'jquery selector' как' $ ('# doorno'). On ('keyup', ' –

+0

Согласен, используя выше, вместо' $ (this) 'будет работать, это означает, что мне нужно для повторения для каждого поля (у меня есть 9 полей в форме). – kurrodu

0

Событие KeyUp посылается к элементу, когда пользователь отпускает клавишу на клавиатуре. Тем не менее, в вашем случае вы пытаетесь вызвать событие click (нажатие кнопки .form2). Поэтому я бы предположил, что ваш код в настоящее время ищет выпуск ключа на клавиатуре в момент, когда пользователь нажимает на поле. Не произойдет.

Если вы добавите в консольный журнал внутри функции щелчка и вне функции keyup, а также другой консольный журнал внутри функции keyup, вы сможете увидеть, что запускается, и когда (я бы Не думайте, что функция keyup запускается вообще).

В ваших фрагментах кода нет ничего, что могло бы добавить какие-либо встроенные стили для ввода (что было бы другой причиной того, что вы не заметили стили ошибок, поскольку они переопределили стиль, назначенный новому классу).

Попробуйте это:

$(document).on('pageinit ready', function(){ 
      $(".form2 input").keyup(function(){ 
        $(this).addClass('errorClassText') 
      }); 
    }); 
Смежные вопросы