jQuery load() function inserts non-interpreted code

Question

I try to put a piece of code from a php file into my index.php file using jquery. I use the function load() of jQuery to do that, and I have no problem with that.

The problem is that this piece of code is not interpreted properly. In this example, I import an span, and to see if this span is properly imported in the index.php, I'm using the jQuery click function

The php code that I want to import

//myText.php

<?php
    echo '<span>theSpan</span>';
?>

Then the jQuery code

//scripts.js

$(document).ready(function(){

    $(".my-php").load("myText.php");

    $("span").click(function(){
        alert( "Success : it's a span !" );
    });

});

The php of index.php

//index.php

<body>
    <div class="my-php">
    </div>
</body>

So, when I click on the span that is inside the my-php div, I'm supposed to see "Success : it's a span". But nothing happens. The span is here with the text 'theSpan' but when I click on it, nothing happens.

I tried something to fix that, but it's a really strange behaviour. I change the jQuery code to that :

$(document).ready(function(){

    var StrPhp = 'test';
    alert("1 - StrPhp : " +StrPhp); //Return 'test'

    $(".my-php").load("myBets.php", function(str){
        StrPhp = str;
        alert("2 - StrPhp : " +StrPhp); //Return '<span>theSpan</span>'
    });

    $(".my-php").html(StrPhp);

});

So, I initialize a variable StrPhp with 'test'. I try to catch the callback of the load function with StrPhp = str. And then I try to put in the my-php div with html function. It didn't work. The span is here with the text 'theSpan' but when I click, nothing.

BUT !!

$(document).ready(function(){

    var StrPhp = 'test';
    alert("1 - StrPhp : " +StrPhp); //Return 'test'

    $(".my-php").load("myBets.php", function(str){
        StrPhp = str;
        alert("2 - StrPhp : " +StrPhp); //Return '<span>theSpan</span>'
    });

    alert("3 - StrPhp : " +StrPhp); //Return 'test'
    alert("4 - StrPhp : " +StrPhp); //Return '<span>theSpan</span>' !!!
    $(".my-php").html(StrPhp);

});

With two alerts before the html() function, it works ! The span in into the my-php div, and is interpreted. I mean when I click on it, I can see "Success : it's a span". Without these alerts, the span is not interpreted by jQuery and when I click, nothing happens.

Obviously, this is not fixed because using alerts is not something I want to do everytime I have this problem.

So if someone can help me, it will be appreciated !

possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Raidri, Apr 08 '15 at 12:13
Can't bind events to elements that don't exist at the time your code runs. Either delegate the events or run the code when the elements do exist — charlietfl, Apr 08 '15 at 12:15

score 2 · Answer 1 · edited Apr 08 '15 at 12:43

2

Use the complete parameter:

$(document).ready(function(){
   $(".my-php").load("myText.php",function () {
     $("span").click(function(){
       alert( "Success : it's a span !" );
     })
   });
});

edited Apr 08 '15 at 12:43

valar morghulis

2,007
27
34

answered Apr 08 '15 at 12:14

madalinivascu

32,064
4
39
55

Obviously, the final use of this load in not this Click function, but a lot of operations that shouldn't be in this Load. It was just a test – user2488028 Apr 08 '15 at 12:18
@user2488028 then provide more real world code in your examples. We don't have crystal balls to guess what you are trying to do – charlietfl Apr 08 '15 at 12:19
@charlietfl I was saying that to say : if I have a lot of click function or others functions, I have to duplicate all in this load ? – user2488028 Apr 08 '15 at 12:55
@user2488028 no, you can use event delegation https://learn.jquery.com/events/event-delegation/ – charlietfl Apr 08 '15 at 12:57

score 0 · Answer 2 · answered Apr 08 '15 at 13:13

0

You can use jQuery.on like this

$(document).ready(function(){

    $(".my-php").load("myText.php");
    $(".my-php").on('click','span',function(){
                    alert( "Success : it's a span !" );
                });

});

answered Apr 08 '15 at 13:13

Grundy

13,356
3
35
55

jQuery load() function inserts non-interpreted code

2 Answers2