проблема jquery MOBILE -> использование .removeClass и .addClass не работает - PullRequest
1 голос
/ 29 августа 2011

Не удалось найти никого, имеющего ту же проблему (результаты поиска обычно возвращают нелепые ошибки кодирования с помощью jquery и css, но здесь это не так.

Проблема: у меня есть

с классами "активными"и 'неактивный'.

При неактивном - элемент списка будет иметь фоновое изображение 1, при активном - элемент списка будет иметь фоновое изображение 2

<ul>
    <li class="active"><a></a></li>
    <li class="inactive"><a></a></li>
</ul>

При нажатии, он долженпереключите их правильно ... пример кода:

$('ul li.inactive>a').live('click', function (e) { 
        e.preventDefault();
        theLI = $(this).closest("li");
            // active / deactivate buttons
            theLI.removeClass('inactive').addClass('active');   
    });

С JQUERY MOBILE этот код не работает, я сначала попытался добавить класс, а затем удалить ... также попытался переключить класс для активного.

Если я удаляю jquery mobile из списка включенных, он работает отлично. Добавление библиотеки jquery mobile обратно, не работает.

Не проблема css.

После проверки сfirebug, похоже, удаление классов работает find, это когда он пытается его добавить?

1 Ответ

0 голосов
/ 29 августа 2011

Это работает:

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

<style type="text/css">
.inactive {color:red;}
.active {color:blue;}
</style>

<script>
    $('ul li.inactive>a').live('click', function (e) { 
        e.preventDefault();
        theLI = $(this).closest("li");
            // active / deactivate buttons
            theLI.removeClass('inactive').addClass('active');   
    });
    $('ul li.active>a').live('click', function (e) { 
        e.preventDefault();
        theLI = $(this).closest("li");
            // active / deactivate buttons
            theLI.removeClass('active').addClass('inactive');   
    });
</script>
</head> 
<body> 

<div data-role="page">
    <div data-role="header">
        <h1>index.html</h1>
    </div><!-- /header -->

    <div data-role="content">   
           <ul>
               <li class="active"><a>One</a></li>
               <li class="inactive"><a>Two</a></li>
          </ul>
    </div><!-- /content -->
</div><!-- /page -->
</body>
</html>
...