Jquery not working on ajax loaded content div

Question

I'm having trouble getting a page with jquery and ajax to work. I'm trying to make this example as simple as possible. The jquery works when it's on a single page but I cannot get it to work after the call.

2 pages, first page:

<!DOCTYPE html>
<html>
<head>
    <script src="../js/jquery-1.8.2.min.js"></script>
    <style type='text/css'>
        #one {
            width: 200px;
            height: 200px;
            background: red;
        }
        #two{
            width: 200px;
            height: 200px;
            background: blue;
        }

        .show {
            display: none;
            background: yellow;
        }
    </style>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("#div1").load("definition.jsp");
            });
        });
    </script>
    <script type="text/javascript">

        $('#wrapper').on('mouseenter', '.touch', function() {
            $(this).next('.show').fadeIn(800);
        }).on('mouseleave', '.touch', function() {
            $(this).next('.show').delay(800).fadeOut(800);
        });
    </script>
</head>
<body>

    <div id="div1"><h2>jQuery AJAX Test</h2></div>
    <button>Get External Content</button>

</body>

Second page:

<div id="wrapper">
<div id="parent_one">
    <div class="touch" id="one">Enter</div>
    <div class="show">Works</div>
</div>
<div id="parent_two">
    <div class="touch" id="two">Enter</div>
    <div class="show">Second Works</div>
</div>

Any ideas? Help please!

possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Jason P, Sep 13 '13 at 18:54

musicnothing · Accepted Answer · 2013-09-13T18:57:11.107

You can't bind the event to #wrapper because it doesn't exist when the page loads. Instead, bind it to document, with instructions to look for #wrapper .touch. The event will only be triggered once that element has been added to the DOM.

Change what's in your second <script> tag to this:

$(document).on('mouseenter', '#wrapper .touch', function() {
    $(this).next('.show').fadeIn(800);
}).on('mouseleave', '#wrapper .touch', function() {
    $(this).next('.show').delay(800).fadeOut(800);
});

Read what the jQuery API has to say about .on().

Note: If you bind the event to #div1, it will trigger for any and all .touch elements you put inside there, not just the ones inside #wrapper.

Ben Jackson · Answer 2 · 2013-09-13T19:04:26.083

#wrapper doesn't exist yet when the code attaching the event handler is executed. So $('#wrapper') will be empty and .on(...) won't do anything. Try attaching the event after the AJAX call:

$("button").click(function() {
    $("#div1").load("definition.jsp",function(){
        $('#wrapper .touch').on('mouseenter', function() {
            $(this).next('.show').fadeIn(800);
        }).on('mouseleave', function() {
            $(this).next('.show').delay(800).fadeOut(800);
        });
    });
});

(i.e. get rid of your second <script> tag, and put this inside your $(document).ready(function(){ ... });)

This way the event handler is only attached when the element is actually there.

For reference: http://api.jquery.com/load/

score 0 · Answer 3 · answered Sep 13 '13 at 18:51

#wrapper is dynamically loaded content, so you need to delegate the event to an element that exists on page load, such as #div1

$('#div1').on('mouseenter', '.touch', function() {
    $(this).next('.show').fadeIn(800);
}).on('mouseleave', '.touch', function() {
    $(this).next('.show').delay(800).fadeOut(800);
});

score 0 · Answer 4 · answered May 20 '14 at 19:22

We were very sonsos.

We need to read again the documentation LOL

$( "#result" ).load( "ajax/test.html #container" );

Well. Probably is needed to load only a fraction of tHe html loaded, not the whole document. When a full document is load in a DIV (or whatever html element) its posible to execute only once a call to jquery function, as an example:

$("img.lazy").lazyload();

But the next time, after unloaded the element -using element.html("")- and reloading the targeted html the function lazyload() does not exist.

SOLUTION (for my case).

 $( "#slides_holder" ).load("slides.html #sm-slider", function( response, status, xhr ) {
                                             if ( status == "error" ) {
                                             var msg = "Sorry but there was an error: ";
                                             $( "#error" ).html( msg + xhr.status + " " + xhr.statusText );
                                             }else{
                                             $( document ).ready(function() {// IS REALLY NEEDED IN HERE A ready CALL? DUNNO BUT WORKS!
                                                                 $("img.lazy").lazyload();
                                                                 });
                                             }});

This will load the whole html but only the element with id '#sm-slider' will be set on the '#slides_holder' element.

score 0 · Answer 5 · answered Aug 27 '14 at 12:09

jQuery(".custom-filter-options .sbHolder ul li a").each(function () {
    var myStr = jQuery(this).text();
    var myArr = myStr.split(" (");
     url = 'your url'; // New Code
            data = myArr[0];
                try {
                    jQuery.ajax({
                        url : url,
                        context: this,
                        type : 'post',
                        data : data,
                        success : function(data) {
            if(data){
                  jQuery(this).html(data);
            }else{
                  jQuery(this).html(myArr[0]);
            }
                        }
                    });
                } catch (e) {
                } 


});

Jquery not working on ajax loaded content div

5 Answers5