XMLHTTP - Retrieving PHP, but can't perform JavaScript / jQuery

Question

So first off, I'm new with jQuery and Ajax. I'm curious to learn more and decided to make a project for myself that is based on Ajax/PHP/jQuery/JavaScript and so on... I want to combine all languages. Now i ran into an problem wich is:

The code of my JavaScript, this call's the PHP file:

function fetchDatabase(method, value) {
    document.getElementById("database_result").innerHTML = '<p class="loading">Laden...</p>';
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("database_result").innerHTML = xmlhttp.responseText;
        }
    }
    if (value != 'none') {
        xmlhttp.open(method, 'php/fetch_browse.php?value=' + value);
    } else {
        xmlhttp.open(method, 'php/fetch_browse.php');
    }
    xmlhttp.send();
}

Now here is my PHP file, this fetches data out of my database:

<?php 
include('database.php');

if (isset($_GET['value'])) {
    $value = $mysqli->real_escape_string($_GET['value']);
    $filequery = "SELECT * FROM files WHERE filelocation='".$value."'";
    $folderquery = "SELECT * FROM folders WHERE folderlocation='".$value."'";
} else {
    $filequery = "SELECT * FROM files";
    $folderquery = "SELECT * FROM folders";
}



foreach ($mysqli->query($folderquery) as $row) {
    echo '<a class="browseclick">';
    echo '<div class="browse-item">';
    echo '<img src="img/browse-item/folder.png">';
    echo '<p title="' . $row['foldername'] . '">' . $row['foldername'] . '</p>';
    echo '</div>';
    echo '</a>';
}
foreach ($mysqli->query($filequery) as $row) {
    echo '<a class="browseclick">';
    echo '<div class="browse-item">';
    echo '<img src="img/browse-item/' . $row['filetype'] . '.png">';
    echo '<p title="' . $row['file'] . '">' . $row['file'] . '</p>';
    echo '</div>';
    echo '</a>';
}

mysqli_close($mysqli);
?>

As you can see, in my PHP code the <a>'s have a class: ".browseclick"
I want with jQuery if i click this i can execute a function.

So my jQuery code is:

$('.browseclick').click(function() {
    var test = $(this).text() + ' - < This is a test';
    console.log(test);
});

But it doesn't console.log() anything. not even the '< This is a test'.
So I tried to put script tags with an alert in the PHP file it self. Also this won't work. Anyone an idea how i CAN execute javascript with content my ajax has fetched?

Thanks,

Are there any JS errors in the console? Try putting an alert at the beginning of your click trigger and check whether that is getting executed or not at the first place. — Tzar, Apr 25 '14 at 14:25
As i said in my question, it doesn't console.log the value, no errors. It won't perform ANY javascript. I only have this problem in the section what is fetched by ajax. — Bentley, Apr 25 '14 at 14:27
Instead of $('.browseclick').click(), use $(document).on('click', '.browseclick', function(){}); — Larta, Apr 25 '14 at 14:30
@Larta only if said javascript is on the parent page, otherwise you'll also need to unbind to prevent duplicate events. — Kevin B, Apr 25 '14 at 14:33
@Larta << This worked for me! Thankyou very much... Could you also maybe explain why this works and the $('.browseclick').click() doesn't? That would be helpfull since i'm still learning :) — Bentley, Apr 25 '14 at 14:54
@user3570796, if you're generating a page dynamically, JS might not find the element to which you want to attach an event because it hasn't been created yet. Using `$(document).on()` allows JS [to bind to higher level DOM elements to compensate](http://stackoverflow.com/questions/17605296/document-onclick-not-working) so the elements can be found and a listener can be successfully attached. — gfish3000, Apr 25 '14 at 15:43

XMLHTTP - Retrieving PHP, but can't perform JavaScript / jQuery

0 Answers0