AJAX 阻止 Javascript答案

【问题标题】：AJAX blocking JavascriptAJAX 阻止 Javascript
【发布时间】：2011-11-24 08:26:57
【问题描述】：

考虑以下代码：

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

第一个脚本用于背景更改逻辑，第二个脚本提供主题缩略图列表。问题是第一个脚本因为第二个而不起作用。如果我不使用这种 AJAX 技术，一切正常。工作代码：

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

后台更改逻辑如下：

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

任何帮助将不胜感激。

【问题讨论】：

如果你不发布第一个脚本的内容，你将很难得到帮助，因为当你只有一个方面时，很难说什么是冲突。

标签： php jquery html ajax load

【解决方案1】：

在代码的第一个 sn-p 中，您在 .Theme 上定义了一个点击函数，在代码 .theme 的第三个 sn-p 中，这是正确的吗？我的意思是这两个类似乎是不同的尝试使用 php function 返回的相同类名。

【讨论】：

【解决方案2】：

您必须在回调函数中添加第二个代码。如果它还没有在dom中，你就不能绑定它。如果要更改 printThumbs 输出，则需要添加回调...

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

如果你想对 ajax 调用（html、xml、json 或其他）的响应做一些 jquery 或其他客户端的东西，你必须指定一个回调函数。为了使事情变得不那么复杂，您必须将回调函数视为文档就绪函数，不同之处在于回调应用于您的 ajax 调用的响应。如果代码不在回调函数中，则无法操作响应，因为它没有注入 dom/当文档准备好时它根本不存在于浏览器中。

【讨论】：

【解决方案3】：

您调用了两次$(document).ready()，因为$() 是一个别名，第二个定义覆盖了第一个。首先，您将文档就绪回调设置为

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

然后用

覆盖它

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

【讨论】：