AJAX阻止Javascript

Consider the following code:

    <script src="js/backgroundChanger.js" type="text/javascript"></script>
    <script>
            $(document).ready(function() {
                $('.Themes').click(function(){
                    $('#dcontent').load('printThumbs.php');
                });
            });
        </script>

The first script is for background changing logic and the second script gives list of thumbnails of the themes. The problem is that the first script doesn't work beacause of the second. If I don't use this AJAX technique everything works fine. Working code:

<script src="js/backgroundChanger.js" type="text/javascript"></script>
    <div id="dcontent">
                    <?php include('printThumbs.php'); printThemesThumbs();?>
                </div>

The background changing logic looks like:

$(function() {
        $('.themes li a img').click(function() {//code
});

Any help will be greatly appreciated.

in your first snippet of the code you defined a click function on .Theme and in the third snippet of the code .theme, is this correct?, i mean both classes seems to be different try to use the same class name return by your php function.

you have to add your second code in a callback function. you can't bind something if it is not already in the dom. if you want to make changes to the printThumbs output you need to add a callback...

<script>
            $(document).ready(function() {//this is also a callback function when document is ready
                $('.Themes').click(function(){//this can be understand as a call back too... code is fired after a click
                    $('#dcontent').load('printThumbs.php',function(){/*your callback code here...this code will be fired after you've loaded printThumbs*/}
                });
            });
        </script>

if you want to do some jquery or other client side stuff on the respons of an ajax call (html,xml, json or whatever) you have to specify a callback function. to make things less complicated you have to look at the callback function just as the on document ready function with the difference that the callback is applied to the respons of your ajax call. if the code is not in a callback function you can't manipulate the respons because it is not injected in the dom/it simply does not exists in your browser when the document is ready.

You're calling $(document).ready() twice, as $() is an alias, and the second definition is overwriting the first. First you are setting the document ready callback to

function() {
    $('.themes li a img').click(function() {//code
} 

and then overwriting it with

function() {
    $('.Themes').click(function(){
        $('#dcontent').load('printThumbs.php');
    });
}