CODEWITHSUNDEEP
phpjqueryfunctionloadalert
user2488028
user2488028

Reputation: 131

jQuery load() function inserts non-interpreted code

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 !

Upvotes: 0

Views: 57

Answers (2)

Grundy
Grundy

Reputation: 13382

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 !" );
                });

});

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

Use the complete parameter:

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

Upvotes: 2

Related Questions