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.

Answer 1

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

Answer 2

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

Answer 3

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:

Answer 4

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