CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Melvin
Melvin

Reputation: 117

AJAX Load doesn't work with script

I'm trying to create a website where HTML-code gets loaded into a div when document is done loading. Though, the hover function doesn't work with AJAX-load. Please help.

$(document).ready(function() {
    $('#sidebar').load('sidebar-main.php');

    $("#sidebar .section").hover(function() {
            $('#sidebar .section .left-mark').show();
        },function(){
            $('#sidebar .section .left-mark').hide();
        });
});

The "sidebar-main.php" file:

<div class='section' onclick='header()'><div class='left-mark'></div></div>

The sidebar in the main PHP-file:

<div id='sidebar'></div>

Upvotes: 1

Views: 58

Answers (3)

gaetanoM
gaetanoM

Reputation: 42044

On newly created elements (refer to .load()), you need to delegate the event handler to your #sidebar ancestor.

Hence, change this:

$("#sidebar .section").hover(function() {
    $('#sidebar .section .left-mark').show();
},function(){
    $('#sidebar .section .left-mark').hide();
});

to:

$("#sidebar").on('mouseenter', '.section', function() {
    $('#sidebar .section .left-mark').show();
}).on('mouseleave', '.section',function(){
    $('#sidebar .section .left-mark').hide();
});

A demo:

//
// instead on next line, for testing I added the next one
//
//$('#sidebar').load('1.php');
$('#sidebar').append("<div class='section' onclick='header()'>aa<div class='left-mark'>bb</div></div>");

$("#sidebar").on('mouseenter', '.section', function() {
    $('#sidebar .section .left-mark').show();
}).on('mouseleave', '.section',function(){
    $('#sidebar .section .left-mark').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id='sidebar'></div>

Upvotes: 2

winhowes
winhowes

Reputation: 8065

So the reason this isn't working is because .load() is asynchronous, meaning the code following the .load() call will execute before the content is loaded. There's two solutions here:

  1. Put your hover call in the callback handler like this:

    $('#sidebar').load('sidebar-main.php', function() {
     $("#sidebar .section").hover(function() {
        $('#sidebar .section .left-mark').show();
     },function(){
        $('#sidebar .section .left-mark').hide();
    });
});

  2. Attach the hover listener to the body tag but only do a call when #sidebar .section is the element hovered. Note that hover is shorthand for mouseenter and mouseleave. Like this:

    $('body').on('mouseenter', '#sidebar .section', function() {
     $('#sidebar .section .left-mark').show();
}).on('mouseleave', '#sidebar .section', function() {
     $('#sidebar .section .left-mark').hide();
});

In the second solution you don't have to worry about the load being asynchronous because the listener is already attached to the body.

Upvotes: 0

vnt
vnt

Reputation: 611

try this 

$('#sidebar').load('sidebar-main.php', bindHoverEvent);
function bindHoverEvent() {
    $("#sidebar .section").hover(function() {
       $('#sidebar .section .left-mark').show();
    }, function(){
        $('#sidebar .section .left-mark').hide();
    });
}

Upvotes: 0

Related Questions