I am trying to load content with this next script when I select pages on the sidebar. This script works without problems:
if(Modernizr.history) {
var newHash = "",
$wrapperTag = $("#main-content"),
contentTag = '#main-content-inside',
activeClass = 'active';
$("#sidebar").delegate("a", "click", function() {
_link = $(this).attr("href");
history.pushState(null, null, _link);
loadContent(_link);
return false;
});
function loadContent(href){
$wrapperTag
.find(contentTag)
$wrapperTag.load(href + " "+contentTag+" ", function(response, status, xhr) {
$("#sidebar a").removeClass(activeClass);
$('#sidebar a[href$="'+href+'"]').addClass(activeClass);
$("#menu").bind('click',function(){
$(this).showSidebar();
});
});
}
This script works without probs and my HTML template looks something like this:
HTML Template
<div id="sidebar">
<nav>
<ul class="ul-vert">
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
...
<li><a href="pageN.html">Page N</a></li>
</ul>
</nav>
</div>
<div id="main-content">
<div id="main-content-inside">
<p id="menu">Show / Hide Sidebar</p>
<div class="text desc">(Content)</div>
</div>
</div>
I've got a tag which is p#menu as an option to display or hide the sidebar. This works just until I load any page then I lose the click event.
So basically my question is:
Why jQuery losses the event after change the content? I could solve this adding again again p#menu on loadContent functions, but I want to understand how jQuery works.
Thanks!