Vote count:
0
I have a very basic question concerning jQuery but I really don't know how to put it in a short sentence/ headwords to google for it. So first of all, I'm sorry if this might be a double post.
For my problem, I guess only those three files a relevant:
- index.html
- content.html
- script.js
My index.html basically is just a file which keeps a navigation bar (build with Bootstrap v3.3.0).
<!DOCTYPE html>
<html lang="en">
<head>
...
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
...
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="home">Home</a></li>
<li><a href="content">Content</a></li>
...
</ul>
</div><!-- end navbar-collapse -->
</div><!--end container -->
</nav> <!-- end navbar -->
<div class="container" id="mainContainer">
<!-- Load by default from the Navigation with jQuery -->
</div><!-- end container -->
<footer>
....
</footer>
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://ift.tt/1qRgvOJ"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
</body>
</html>
My content.html basically only displays a "button" now (Actually it displays much more, but for this example it only displays a "button")
<div class="col-xs-12 col-md-6">
<a id="testButton" class="btn btn-success" href="#">This is a Test-Button</a>
</div>
My script.js basically only "changes" the content of the div-Element (<div class="container" id="mainContainer">…</div>).
$(document).ready(function () {
$('.nav li a').click(function(e) {
$('.nav li').removeClass('active');
var $parent = $(this).parent();
var $content = $(this).attr('href');
if (!$parent.hasClass('active')) {
$parent.addClass('active');
$('#mainContainer').hide().load('$content + '.html').fadeIn('500');
$('#mainFooter').hide().fadeIn('500');
}
e.preventDefault();
});
$('#testButton').click(function(event){
alert("Test, this Button works!");
event.preventDefault();
});
});
Everything displayed here works pretty fine (I'm not sure if this is the way how you should use the navigation, but it works). When I change the content by clicking on the "Content-Item" from the navigation, the content.html file gets displayed in the div-element. But when I click on the Button from the content.html (which was loaded before), no alert gets fired. I guess because the "javascript file", can't find a reverence when the Webpage loads the first time. When I enter the javscript code directly into the content.html file the button actually fires an alert (same happens when I only link the file <script src="js/script.js"></script>).
I really do not want to enter this single line of code (<script src="js/script.js"></script>) to every "content-file". So is there an easier way how to do that? Maybe I also need to change the way how I use the navigation.
Thanks for your help
jQuery call function after content get changed by .load() method
Aucun commentaire:
Enregistrer un commentaire