Question

After spending several hours, I’m stumped. I can’t get what should be a simple jQuery function to work as intended. This is like my second try at jQuery so I’m a bit of a noob, but I’ve spent time on reading multiple tutorials, looked at other similar questions here etc, but I just can’t get it to work.

I’ve got a menu which I would like to populate with data provided from a simple Ajax call. Debugging, I can see that everything fires correctly, except for one thing; it won’t populate my newly created div with the returned data. Here’s the code:

$(document).ready(function() {
$("#parent").on({ // Tested with .live as well, same result =/
    click: function() {
        //$(this).empty();
        $(this).append('<div id="#data-child"></div>'); // Is created
        getAjaxFunction('child');
    },
    mouseenter: function(){
        //$(this).empty();
        $(this).append('<div id="#data-child"></div>'); // Is created
        getAjaxFunction('child');
    },
    mouseleave: function(){
        $(this).remove('#data-child'); // Won't remove
    }
})
});

As you may suspect, the .remove won’t remove the #mydiv either. The getAjaxFunction looks like this, if it may be of value:

function getAjaxFunction( page ) {
$.ajax({
    type: "GET",
    url: "include/getdata.php",
    data: { section: page },
    datatype: "html",
    beforeSend:function(){
        // this is where we append a loading image, but it won't show...
        $('#data-'+page).append('<div class="loading"><img src="/images/pb-loader.gif" alt="Loading..." /></div>');
    },
    success: function(data) { // data is returned correctly
        $('#data-'+page).empty();
        $('#data-'+page).append (data); //won't append the data. tested with .html instead as well, without luck =/
    },
    error:function(){
        $('#data-'+page).append('<p class="error"><strong>Oops!</strong> Something went wrong. Please try again later...</p>');
    }
});}

Would be very appreciative to any answers to this, thanks!
I’m suspecting I’m overdoing things but this is what I ended up with when the simple hover functionality wouldn’t work for me xD

Answer 1

I would have written this as a comment to your question but my rep isn’t there yet. Since nobody has answered your question I think that this is probably better than nothing.

What happens if you do this?

success: function(data) { // data is returned correctly
    $('#data-'+page).empty();
    $('#data-'+page).append (data); //won't append the data. tested with .html instead as well, without luck =/
    console.log($('#data-'+page));
    console.log(data);
},

Do you get the div that should be updated and the correct data?