jquery MOBILE issue -> using .removeClass and .addClass not working_问答_开发者

jquery MOBILE issue -> using .removeClass and .addClass not working

开发者 https://www.devze.com 2023-03-31 16:09 出处：网络

Couldn\'t find anyone having the same issue (search results usually return ridiculous coding errors with jquery and css, but that\'s not the case here.

Couldn't find anyone having the same issue (search results usually return ridiculous coding errors with jquery and css, but that's not the case here.

Problem: I have

with classes 'active', and 'inactive'.

On inactive - the list item will have a background image 1 on active - hte list item will have background image 2

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

On click, it's supposed to switch them right开发者_如何转开发... example code:

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

With JQUERY MOBILE this code doesn't work, I've tried adding the class first, then removing... also tried toggleclass for the active.

If I removing jquery mobile from being included, it works perfectly. Add jquery mobile library back in, doesn't work.

Not a css problem.

Upon inspection with firebug, it seems removing classes works find, it's when it tries to add it?

This works:

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