Question

我有以下代码

<a onclick="$('#result').load('codes/test.html');$('#result').show();" >XHTML code</a>

它在结果div中完美地加载了test.html的内容，并使其可见。在此之前一切都很好。当我尝试添加一个函数prettyPrint()，它对文本应用了一些修改并将代码更改为以下内容：

<a onclick="$('#result').load('codes/test.html');$('#result').show();prettyPrint();" >XHTML code</a>

我无法使prettyPrint（）工作，相反，如果我添加onmouseout="prettyPrint();，它在我取下光标时起作用。我没有javascript和jquery的经验所以我不知道什么是真正的问题，所以我很感激如何让prettyPrint工作onclick。

Answer 1

如果您使用的是jQuery，为什么还要使用内联Javascript？为什么不：

<script type="text/javascript">
$(function(){
    $('#myLink').click(function(){
        $('#result').load('codes/test.html', function() {
            $('#result').show();
            prettyPrint();
        });

        return false;
    });
}):
</script>

<a id="myLink" href="#">XHTML code</a>

修改

固定代码，以便在调用加载回调时调用prettyPrint()。

Answer 2

加载是异步的。当调用prettyPrint时，文本可能还没有。

<a onclick="$('#result').load('codes/test.html', function(){prettyPrint();$('#result').show();});" >XHTML code</a>

load（）接受第二个参数，这是一个在加载完成时调用的函数。我将prettyPrint和节目移到了那里。

Answer 3

您可以执行以下操作：

$('#result').show("fast",function(){ prettyPrint();});

Answer 4

您应该使用回调函数：

<a onclick="$('#result').load('codes/test.html', function() {prettyPrint();}).show();" >XHTML code</a>

Answer 5

您的问题是您误解了.load()的工作原理。在加载数据之前它不会阻塞。相反，只有启动加载并立即返回。因此，当尚未加载数据时，将调用prettyPrint函数。

要解决此问题，请将回调函数传递给.load。加载完成后将调用该回调：

$("#result").load( '...',
    function() { 
        $("#result").show();
        prettyPrint();
    }
}

加载函数onclick

5 个答案: