Question

This following code works fine:

$('#transPage, #categorizePage, #IDKPage').live('pageinit', function() {
$('.theListItem .red').click(function() {
    var $changeColor = $(this).closest('div[data-theme="a"]').css("background-color", "#ff3333");
    });

$('.theListItem .green').click(function() {
    var $changeColor = $(this).closest('div[data-theme="a"]').css("background-color", "#008021");
    });

});

And this also works great:

$('#transPage, #categorizePage, #IDKPage').live('pageinit', function() {
    $('.trans .theListItem .red').click(function() {
        var $toRemove = $(this).closest('div[data-theme="a"]')

        $toRemove.animate({
            height: 0
        }, 500, function() {
            // This is the callback.
            $toRemove.remove();
        });

        return false;
    });
});

Until I uncomment this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>   

And then it no longer works. Problem is that I need those scripts for other stuff to work. Any ideas what could be wrong? Thanks.

To further illustrate my problem the following is my entire working head which I’ve now posted at the bottom of the page:

<script src="js/jQuery/jquery-1.8.2.min.js"></script>

<!--script src="http://code.jquery.com/mobile/1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.js"></script>-->
<script src="jquery.mobile-1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.js"></script>
<!--<script src="jquery.mobile-1.2.0-rc.2/jquery.mobile-1.2.0-rc.2.min.css"></script>-->


<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>   
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>  -->

<script type="text/javascript" src="cubiq-iscroll-bad88fb/src/iscroll.js"></script>    




<script src="swipe/dist/jquery.swipeButton-1.2.1.js"></script>


<script src="js/scrollbar.js"></script>
<script src="js/script.js"></script>

<link rel="stylesheet" href="css/jQueryMobileStructure.css" />
<link rel="stylesheet" href="css/style.css" /> 
<link rel="stylesheet" href="css/nikostyle.css" /> 

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Answer 1

If those scripts are working already before you add the stuff into your head, I assume that means you’re already referencing the jQuery scripts somewhere before or something. It would probably help if we saw more code but I assume that’s what the case is.