Pegar apenas o conteúdo dentro de uma tag na função load do jQuery

[Guinsilva 0]

Estou fazendo um site usando a função .load() do jQuery para modificar o conteúdo do site sem a necessidade de recarregar a página. De maneira resumida, o código está assim:

$('#header a').click(function (event){
	event.preventDefault();
	urlLink = $(this).attr("href");
	window.history.pushState("", "", urlLink);
	
	$("#container").load(urlLink+" #container");
}

 

Entretanto, o código pega também a div "container" da outra página e insere dentro da div "container" que já existente, duplicando as tags desta maneira:

<div id="container">
  <div id="container">
    <!-- Conteúdo da outra página -->
  </div>
<div>

 

Há alguma maneira de quando usar o método load() eu pegar apenas o conteúdo que há dentro desta Tag sem que ocorra esta duplicidade?

[Lucas Guima 164]

Já deu uma olhada no manual? Seu código não está igual ao exemplo.

[Guinsilva 0]

Já olhei sim. Nos exemplos usam IDs diferentes para fazer o load, mas eu preciso manter os IDs com mesmo nome pois o link em que vou pegar o conteúdo é acessível e tem outras animações em jQuery de transição no qual necessito que mantenha o mesmo nome para que eu consiga fazê-las.

[Lucas Guima 164]

Qual a duplicidade então?

[Fiote 24]

Dois elementos com o mesmo ID? Você não entendeu o conceito de ID então...

[Guinsilva 0]

O que preciso é justamente remover a segunda div com o mesmo ID na hora de dar o load, ao invés do load fazer isso:

<div id="container">
  <div id="container">
    Lorem ipsum dolor sit amet
  </div>
<div>

Fazer isso:

<div id="container">
    Lorem ipsum dolor sit amet
<div>

Os dois possuem o mesmo ID pois estão em páginas diferentes.

[Lucas Guima 164]

Se você quer removê-la, por que ela está aí?

[Guinsilva 0]

Pois a segunda vem junto quando usa o load.

Por exemplo, antes a div "container" estava assim:

<div id="container">
  Texto 1
<div>

Depois da função load(), ela fica assim:

<div id="container">
  <div id="container">
    Texto 2
  </div>
<div>

E eu precisaria que ficasse assim:

<div id="container">
  Texto 2
<div>

 

[Lucas Guima 164]

O problema tá no seu load, procure preveni-lo em vez de remediá-lo.

[Fiote 24]

Concordo com o Lucas, mas supondo que não seja possível:

 

 

$('#header a').click(function (event) {
        event.preventDefault();
        urlLink = $(this).attr("href");
        window.history.pushState("", "", urlLink);

        var extra = document.createElement('div'); // crie um div extra
        $("#container").wrap(extra); // jogue o #container dentro do div
        $(extra).load(urlLink + " #container"); // seta o html do div, apagando assim o #container original
}