javascript - ajax loaded content, script is not executing

Question

I am using jquery address plugin for loading pages, but without hash(#).

index.html:

<a href="page.html">Link</a>
<div id="content">

    <script>

        $(document).ready(function() {

            $.address.init(function(event) {

                $('a').address();

            }).change(function(event) {
                // do something depending on the event.value property, e.g.
                console.log(event.value);

                $.ajax({
                    type: "POST",
                    url: event.value,
                    success: function(msg){
                        $('#content').html( $(msg).find("#content").html() );
                    }
                });
            });
            $('a').click(function(e) {
                $.address.value($(this).attr('href'));

            });
        });

    </script>


</div>

page.html:

<div id="content">
    <p>text</p>
    <script>
        $(document).ready(function() {
            alert('loaded');
        });
    </script>

</div>

In #content div will be loaded #content html from page.html(maybe i should use other function, not .html(), correct me please), in that div is script tag, but i dont get alert when that page is loaded from ajax, it works on without ajax loading. Can someone help me ?

EDIT: I am getting this error when i'm trying to click on link with js function:

XMLHttpRequest cannot load javascript:;. Cross origin requests are only supported for HTTP.

DEMO: http://fbstatusi.com/desavanja/kalendar/mesecna_lista

click on link Zurka 123

Answer 1

document.ready happens only once, when document is loaded. AJAX request does not cause it.

<div id="content">
    <p>text</p>
    <script type="text/javascript">
            alert('loaded');
    </script>
</div>

This should work. Also try to change $(msg).find("#content").html() to $(msg).find("#content")[0].innerHTML, as jquery html strips out tags.

EDIT

Take a look at this thread there is a long discussion about why that happens. In case like this $(msg) jquery will always remove script tags. But at the same time $(msg).filter("script") returns scripts, so you can find those scripts first and then insert them all after $('#content').html( $(msg).find("#content").html() );