AJAX Load doesn't work with script

Question

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>

have you tried using on handler for ajax like $("#sidebar .section").on('hover',function(){ ...}); — Niladri
– Niladri, Commented Sep 23, 2017 at 20:01
load() has a callback function when the load has completed. This means, I think, it works asynchronous. So I advice to use the callback function. See: api.jquery.com/load — KIKO Software
– KIKO Software, Commented Sep 23, 2017 at 20:05

gaetanoM · Accepted Answer · 2017-09-23 20:28:44Z

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>

vnt · Accepted Answer · 2017-09-23 20:19:37Z

0

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();
    });
}

answered Sep 23, 2017 at 20:19

vnt

6116 silver badges13 bronze badges

Comments

winhowes · Accepted Answer · 2017-09-23 20:22:44Z

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:

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();
    });
});

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.

Collectives™ on Stack Overflow

AJAX Load doesn't work with script

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related