Queria saber como faço pra utilizar meu script dentro do conteúdo que irá ser carregado pela função load()
.
A função:
$(document).ready(function() {
$('.submenu').click(function(event) {
event.preventDefault();
$('.page-wrapper').load($(this).data('href'));
});
});
Os elementos (esboço):
<section class="page-wrapper">
<h1> Hello, guys! </h1>
<p> Este é um exemplo do conteúdo da página </p>
<ol class="menu">
<li><a class="submenu" data-href="www.example.com" href="#">Submenu1</a></li>
<li><a class="submenu" data-href="www.example.com" href="#">Submenu2</a></li>
<li><a class="submenu" data-href="www.example.com" href="#">Submenu3</a></li>
</ol>
</section>
Ou seja, o menu sempre irá carregar via load()
. Com isso meu script não funciona nos elementos que são incorporados à minha "página principal". Como corrijo esse defeito?
on
? Ela garante que futuros elementos que serão adicionados ao DOM e que satisfaçam esse seletor.$('.submenu').on('click', function(e){...});
e o resultado não mudou. '-'.submenu a
) porque o seletor age sobre o<ul>
e não sobre o<a>
?