[Answered ]-Load content from Ajax-loaded content

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

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

0👍

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

0👍

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

Leave a comment