javascript - ajax loaded content, script is not executing - Stack Overflow

admin管理员组

文章数量:1401776

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:

click on link Zurka 123

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./desavanja/kalendar/mesecna_lista

click on link Zurka 123

• javascript
• jquery
• ajax
• jquery-address

Share Improve this question Follow edited Sep 10, 2012 at 22:27 Mirza Delic asked Sep 10, 2012 at 21:29 Mirza DelicMirza Delic 4,3591212 gold badges5959 silver badges8888 bronze badges 5

• Can you post a demo on JSFiddle? – Joseph Commented Sep 10, 2012 at 21:39
• can't make it work on jsfiddle at all :( – Mirza Delic Commented Sep 10, 2012 at 22:07
• Do you have href="javascript:..." somewhere? – Viktor S. Commented Sep 10, 2012 at 22:21
• Yes i have, in that way i have tried to click on delete ment and i got that error. – Mirza Delic Commented Sep 10, 2012 at 22:23
• well, XMLHTTPRequest just can't load url like javascript:..., so you must use onclick instead of href="javascript:..." – Viktor S. Commented Sep 10, 2012 at 22:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I've encountered a case when an ajax call would return new HTML that includes the script that needs to execute. The code looked like this:

$.ajax('/url', {
  method: 'get',
  success: function(response) {
    document.getElementById("my-body").innerHTML = response;
  }
});

In that code above, response would contain the script that needs to be executed, but it would not execute. Changing the success callback to the following fixed it:

$("#my-body").html(response);

I'm not sure why that was the case (obviously it has to do with the implementation of .html() method). Perhaps someone could ment with an explanation

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() );

本文标签： javascriptajax loaded contentscript is not executingStack Overflow