Load content from Ajax-loaded content

Question

I can load content with Ajax to my project, but the content also has Ajax calls to the same function. But these calls don't work.

$(function cargar_ajax(){
$(".call_cuerpo").on("click",function(){
    var content_id = $(this).data("id")
    //~ console.log(content_id)
    $.ajax({
        url: "/get_content?content_id="+content_id,
        }).done(function(res) {
            $( '.contenido_ajax' ).html(res);
            });
    });
});

I read that you must call the function after loading content but not how or where.

This is my div in HTML:

<div class="contenido_ajax"></div>

A working Ajax call:

<li><a href="#" class="call_cuerpo" data-id="1"><small>Load ajax content</small></a></li>

This call doesn't work if it's loaded with Ajax:

<li><a href="#" class="call_cuerpo" data-id="{{ item.content_id }}@{{ item.book_id }}">{{ item.code }}</a></li>

The code is loaded from an Ajax call.

Note: I'm using: Django 1.6 + bootstrap 3.2 + html 5

Thanks in advance.

score 2 · Answer 1 · answered Nov 07 '14 at 10:08

2

Because the .call_cuerpo elements are being dynamically appended to the DOM you need to use a delegated event handler:

$('.contenido_ajax').on('click', '.call_cuerpo', function() {
    // rest of your code...
});

answered Nov 07 '14 at 10:08

Rory McCrossan

331,213
40
305
339

empiric · Answer 2 · 2014-11-07T10:38:34.147

0

If i get this right, your click-event is not executed when its loaded via ajax ? Try:

$("document").on("click", ".call_cuerpo",function(){ ...

for your click-event

edited Nov 07 '14 at 10:38

answered Nov 07 '14 at 10:08

empiric

7,825
7
37
48

2

Do not use `body` for delegated event handlers. Styling can make it not respond to click events. `document` is the safest fallback if nothing is closer. – iCollect.it Ltd Nov 07 '14 at 10:09

score 0 · Answer 3 · answered Nov 07 '14 at 11:12

Try as my code below tested in my local apache server. event.preventDefault() to prevent the default functionality occuring from link element.

<script src="jquery-1.11.1.min.js"></script>
<script>
    $(".call_cuerpo").click(function(event){
           // alert("I am working");
            event.preventDefault();

        var content_id = $(this).data("id")
        //~ console.log(content_id)
        $.ajax({
            url: "./get_content.php?content_id="+content_id
        }).done(function(res) {
            $( '.contenido_ajax' ).html(res);
        });

    });
</script>

Output: ajax_html_load_output

score 0 · Answer 4 · edited May 23 '17 at 12:12

Thanks for your answers and sorry for taking so long to answer.

Indeed the problem is: it does not run when called from ajax content.

After reading this and this the problem is not able to delegate the event.

This is the html code that is not called (previously loaded from ajax):

<a class="call_cuerpo" data-id="A0300306@1" href="#">03.06</a>

Must be loaded in this django template.html:

{% block book_content %}
<div class="contenido_ajax"></div>
{% endblock book_content %}

I have simplified the function like this:

$(function load_ajax(){
    $(".call_cuerpo").on("click", function( event ){
        event.preventDefault();
        var content_id = $(this).data("id")
        // console.log(content_id)
        $( ".contenido_ajax" ).load( "/get_content?content_id="+content_id );
    });
});

I tried several syntax and the event goes down.

I Try:

$(function load_ajax(){
    $(".call_cuerpo").on("click", "contenido_ajax", function( event ){
        event.preventDefault();
        var content_id = $(this).data("id")
        console.log(content_id)
        $( ".contenido_ajax" ).load( "/get_content?content_id="+content_id );
    });
});

And:

$(function load_ajax(){
    $(".contenido_ajax").on("click", ".call_cuerpo", function( event ){
        event.preventDefault();
        var content_id = $(this).data("id")
        console.log(content_id)
        $( ".contenido_ajax" ).load( "/get_content?content_id="+content_id );
    });
});

But that does nothing. What am I doing wrong?

PD: Sorry for my english

Load content from Ajax-loaded content

4 Answers4