load('file.html #target .subTarget') not working

Question

I am trying to

$(destino).load('all.html #reservas_1',function(){
                console.log('cargado!');
                alert($(destino).html()); //the alerts shows HTML
}).show();

And it works fine,

But the incoming html code is wrapped by a <div class="content"> which has a display none so I am trying

$(destino).load('all.html #reservas_1 .content',function(){
                console.log('cargado!');
                alert($(destino).html());   //the alert shows black string
        }).show();

Any idea why? Is it because I am using a class as selector or is that I can't load a subtarget?

Answer 1

Probably you need to update html after loading:

$(destino).load('all.html #reservas_1',function(){
            //$(destino).find('.content').unwrap();
            $(destino).html($(destino).find('.content').html());
            alert($(destino).html());   //the alert shows black string
    }).show();

It looks like it allows to use only selector by ID becuase it means that it should be only one element with id on the requested page (by html specification it shouldn't be 2 elements with the same ID). So, if you will use more complex selectiors it can return array of elements and jQuery don't know how to merge all of them.

jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document.

You can't get html in such way if you will have array of elements.