javascript - loading a function onclick - Stack Overflow

admin管理员组

文章数量:1332383

I have the following piece of code

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

it loads perfectly the content of test.html in the result div and also make it visible. Until this point all are good. When I try to add a function prettyPrint() which apply some modifications on the text and change the code to the following:

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

I can't make the prettyPrint() to work, instead if I add onmouseout="prettyPrint(); it works when I take off my cursor. I don't have experience with javascript and jquery so I don't know what is the real problem, so I would appreciate any help on how to make prettyPrint to work onclick.

I have the following piece of code

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

it loads perfectly the content of test.html in the result div and also make it visible. Until this point all are good. When I try to add a function prettyPrint() which apply some modifications on the text and change the code to the following:

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

I can't make the prettyPrint() to work, instead if I add onmouseout="prettyPrint(); it works when I take off my cursor. I don't have experience with javascript and jquery so I don't know what is the real problem, so I would appreciate any help on how to make prettyPrint to work onclick.

• javascript
• jquery
• html
• events
• onclick

Share Improve this question Follow edited Mar 11, 2013 at 23:14 nneonneo 180k3737 gold badges328328 silver badges410410 bronze badges asked Aug 25, 2010 at 15:14 SotirisSotiris 40.1k1111 gold badges5454 silver badges8686 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

If you are using jQuery why do you bother with inline Javascript? Why not:

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

Edit:

Fixed code so it calls prettyPrint() when load callback is called.

The load is asynchronous. When prettyPrint is called, the text might not be there yet.

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

load() takes a second argument which is a function to call when the load is done. I moved the prettyPrint and the show to there.

You can do the following:

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

You should use a callback function:

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

Your problem is that you misunderstand how .load() works. It does not block until the data is loaded. Instead, it only starts loading and returns immediately. Therefore, your prettyPrint function gets called when the data is not loaded yet.

To fix this, pass a callback function to .load. That callback will be called when the load pletes:

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

本文标签： javascriptloading a function onclickStack Overflow