jQuery doesn't execute on div loaded with ajax

Question

I'm developing a website using PHP,MySQL,AJAX,Javascript,HTML5,css3... What I'm trying to do is load an external html file and have the Javascript that is embedded execute.

The ajax load I'm trying to use is this

<pre><code>


    $(document).ready(function(){

        $(".meny a").click(function(){
            page=$(this).attr("href");
            $.ajax({
                url: "includes/"+page,
                cache:false,
                success:function(html){
                    afficher(html);
                },

                error:function(XMLHttpRequest,textStatus,errorThrown){
                    alert(testStatus);
                }
            })

            return false;
        });
    });

    function afficher(data){
        $("#main").fadeOut(500,function(){
        $("#main").empty(); 
        $("#main").append(data);
        $("#main").fadeIn(1000);
        })
        }


</code></pre>

when the content of the page is loaded directly javascript(or jQuery) functions working fine, but when the div tag that found in the content of another page loaded by AJAX, javascript(or jQuery) not working on this div, while jquery scripts are already stored in the "head" tag .

I think that the problem is the AJAX, since it's working fine when I call directly the page which contains the Javascript.

"..since it's working fine when I call directly the page which contains the Javascript." could you post the content of "..the page which contains the Javascript." — Ricky, Jan 14 '13 at 06:22
I am not getting what is not working for you.When you try to load the content of div via ajax, is it loading fine? — Renjith, Jan 14 '13 at 06:24
Try the following link http://forum.jquery.com/topic/fadeout-old-fadein-new-ajax-content-not-working-as-expected — Ashwin Preetham Lobo, Jan 14 '13 at 06:29

score 2 · Answer 1 · answered Jan 16 '13 at 19:14

@kieran no i never try this trick ! i think i figure out the real problem !

jQuery actually removes any javascript it encounters in an ajax call. They do it on purpose to prevent issues in IE. Here is the actual snippet from jQuery 1.8.3 (lines 7479-7481):

// inject the contents of the document in,removing the scripts 
// to avoid any 'Permission Denied' errors in IE 
.append( responseText.replace( rscript, "" ) )

In line 7291 is where it defines the rscript regex: rscript = /(?:(?!</script>)<[^<])*</script>/gi, and you're right i have to add a callback function into the load ajax!

score 0 · Answer 2 · answered Jan 14 '13 at 06:34

0

By default the javascript that is contained in the page you are retrieving by AJAX will not be executed, because it is treated like plain text.

You will want to evaluate the text as javascript. There is an inbuilt function in javascript that can achieve this called eval. Here is a good article on using eval with AJAX, thanks to technify.me.

However I must note that using eval is considered a bad practice. There is a well known saying "eval is evil" because it has poor performance, and can have vulnerabilities to XSS. So you may want to look at how to achieve a similar affect without directly using AJAX calls (maybe dynamically built script tags). However for your purposes eval will work if the response is purely javascript. Otherwise you will need to somehow extract the javascript from the HTML your $.get returns.

answered Jan 14 '13 at 06:34

kieran

1,537
10
10

hello , first thx for the anser.... and it's not the first time i heard about this solution (eval) , i heard also about callback ,trigger and getscript .. but i'm just beginner on jQuery , if you can provide me some code to try with it, it will be helpful . and it is noted that the page i try to load with ajax doesn't contain javascript ! all javascript and jQuery are already stored in the "head" tag in the first page ! – Jiihad Khattabi Jan 14 '13 at 16:07
Wait what? Then what are you referring to with: `load an external html file and have the Javascript that is embedded execute`? Is the snippet you've provided us the external javascript, and you have a script tag in the `` to it? Then the answer is probably just remove the `` and `` tags because they're for inline scripts...
– kieran Jan 14 '13 at 18:33
no you don't understand me ! obviously all javascript stored in the head tag like any web page the probleme is that javascript doesen't execut in content html when it's loaded with ajax ! but if i load the same page directly with include (with php for testing) the javascript execut ... hope you understand my bad english :/ – Jiihad Khattabi Jan 16 '13 at 04:52
Hm, I think this would be a lot easier if the entirety of the page was shown. Possibly I think I understand you: you have some javascript which refers to the HTML loaded by the AJAX call, which works when you include it on the server, but not when loaded dynamically. Possibly the javascript in the head is executing _before_ the HTML is returned by AJAX? It will work with PHP because it is loaded during the page response, before javascript execution. Maybe the solution is to call the function that refers to the HTML in `afficher`, when you have guaranteed that the HTML will be present. – kieran Jan 16 '13 at 06:03
yes this is exactly what happing ! so in this case i try to add the callback fucntion but it's not work with me , and i'm not sure what exactly should i do ! could you point me in the right direction? – Jiihad Khattabi Jan 16 '13 at 11:31
The only thing I can think of is you need to make sure the callback is correctly performed after the `append` call, because your use of timed functions with `fadeOut` will make the operation asynchronous. Have you tried something like: `$("#main").empty().append(data).fadeIn(1000).each(function() { yourCallback(); });`? See for example [this SO](http://stackoverflow.com/questions/3113853/jquery-perform-callback-after-append) – kieran Jan 16 '13 at 18:46
no i never try this trick ! i think i figure out the real problem ! jQuery actually removes any javascript it encounters in an ajax call. They do it on purpose to prevent issues in IE. Here is the actual snippet from jQuery 1.8.3 (lines 7479-7481): // inject the contents of the document in,removing the scripts // to avoid any 'Permission Denied' errors in IE .append( responseText.replace( rscript, "" ) ) In line 7291 is where it defines the rscript regex: rscript = /(?:(?!)<[^<])*/gi, and you're right i have to add a callback function into the load ajax! – Jiihad Khattabi Jan 16 '13 at 20:12
// inject the contents of the document in,removing the scripts // to avoid any 'Permission Denied' errors in IE .append( responseText.replace( rscript, "" ) ) In line 7291 is where it defines the rscript regex: rscript = /(?:(?!)<[^<])*/gi, and you're right i have to add a callback function into the load ajax! – Jiihad Khattabi Jan 16 '13 at 20:12

score -2 · Answer 3 · answered Jan 14 '13 at 06:20

-2

use

 $(".meny a").on( 'click', ...

instead of

 $(".meny a").click( ....

the $(".meny a") will be able to click now

answered Jan 14 '13 at 06:20

Cauliturtle

691
1
5
16

`click` means the same as binding on the `click` event. The question is how to execute the javascript that is contained in the HTML response from the ajax call (and the answer would be to use `eval` or quivalent). – kieran Jan 14 '13 at 06:24
i use it befor and it doesn't worck i try even like that $(document).on('click',"a.shortcut", function(){ and it's doesn't work :/ – Jiihad Khattabi Jan 14 '13 at 16:09

jQuery doesn't execute on div loaded with ajax

3 Answers3