This is my jquery:
$(document).ready(function(){
$("div#overlay div#getFBid div#overlayClose").on("click", function(){
console.log("test")
});
});
And this is my html, which is called with ajax:
<div id="overlay">
<div id="getFBid">
<div id="overlayClose"> </div>
<h1>Wat is mijn Facebook page ID?</h1>
<div id="fbPageURLholder">
<input type="text" id="fbPageURL">
</div>
</div>
</div>
I can't figure out what I'm doing wrong, I'm obviously missing something that should be really simple I think.
Any thoughts?
PS. I should add to this that I saw on jquery.com that the live function is deprecated and I should use delegate or on.
This:
$("div#overlay div#getFBid div#overlayClose")
can be reduced to
$('#overlayClose')
since you'll only ever have one element of that ID in your document.
As for the problem; if you've loaded the content with AJAX, it won't be available in DOMReady, when you're binding your listener.
To bind to elements that have not yet been added, you need to use a live delegate:
$(document).on('click', '#overlayClose', function() {
console.log('test');
});
Where $(document) should be something as close to the element as possible, that is available at DOMReady, and that is not destroyed.
Did you import jQuery?
That works for me, clicking Close will log a test message in the console:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="overlay">
<div id="getFBid">
<div id="overlayClose">Close</div>
<h1>Wat is mijn Facebook page ID?</h1>
<div id="fbPageURLholder">
<input type="text" id="fbPageURL">
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#overlayClose").on("click", function(){
console.log("test")
});
});
</script>
Hope that helps.
Related
I am trying to make a div hide and then show itself when the page has fully loaded.
The div tag doesn't appear but then it also never loads and I can't figure out why.
Here is my code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#home-pro-slider').show();
});
</script>
<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs" style="display:none;">
</div>
</div>
</div>
My console shows:
Uncaught ReferenceError: $ is not defined
at (index):479
I believe this is caused by me not loading in jQuery before I run this snippet, but I have the reference in my header before this code runs as far as I am aware.
EDIT: Apologies, I made an error copying and pasting my code, the missing ')' is indeed there, I still have the issue.
Add a ) as error message clearly shows.
$(document).ready( function() {
$('#home-pro-slider').show();
})
You have a typo, missing a the ) of the ready function
$(document).ready( function() {
$('#home-pro-slider').show();
});
EDIT: I just read your edit and the problem you face is that jQuery is not initialized properly. You have to define your jQuery-Script-Tag first and then follow it up with other scripts like so:
<head>
.
css and meta info
.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="myScript.js"></script>
</head>
I also want to add that you should always separate your code. CSS belongs into a separate CSS-file and not inline. The javascript belongs into a separate file as well and the text/javascript or application/javascript-tags are deprecated and should be left out.
As you can see below: It does work but because the div was empty you could not see anything. If you somehow load your javascript before you initialize the div it might not be able to find it but with $(document).ready() this can't be the case.
$(document).ready( function() {
$('#home-pro-slider').show();
});
#home-pro-slider {
display: none;
background-color: red;
width: 30px;
height: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs">
</div>
</div>
</div>
Missing close tag
$(document).ready( function() {
$('#home-pro-slider').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#home-pro-slider').show();
});
</script>
<div class="container nopadding">
<div class="row">
<div id="home-pro-slider" class="slider-pro bsnojs" style="display:none;">
</div>
</div>
</div>
I am including a new page using nginclude directive. Click event defined in included page not working.
Main app
<div ng-app="">
<input type="text" ng-model="ss"/>
<div ng-include src="'include/page1.html'">
</div>
</div>
Page1.html
<body>
<div id="a">{{ss}}</div>
<script type="text/javascript">
document.getElementById("a").addEventListener("click",function(){
alert("a");
})
</script>
</body>
why does event defined in page1.html is not working in main app. Is my approach is right or wrong...
You can try with:
<div id="a" ng-click="clickHere()">{{ss}}</div>
Where clickHere:
$scope.clickHere = function(){ alert('a'); };
For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.
I am working on a ASP.NET MVC 3 application that is using JQuery. In this application, I have my _Layout.cshtml file and MyView.cshtml. In _Layout.cshtml I have something like the following:
<div id="wrapper" style="background-color:Gray; height:100%;">
<div id="content" style="background-color:Silver;">
#RenderBody()
</div>
<div id="footer" style="background-color:Silver;">
Footer
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// Do stuff
alert("Root Loaded");
});
</script>
In MyView.cshtml, I have the following:
<div id="contentDiv">
<!-- Page content is here -->
</div>
<script type="text/javascript">
$().ready(function () {
alert("Page Loaded");
});
</script>
At this time, the "Page Loaded" message box appears before the "Root Loaded" message. I kind of understand why this is happening. However, I would like to write a method in MyView.cshtml that gets called after the root document.ready function is called. Am I making sense? Is there a way to do this? If so, how?
Thank you
This should fire after all elements on the page are loaded, so, it should be later, than the ready event.
$(window).load(function () {
alert("Whole page Loaded");
});)
You might want to consider Queuing as suggested in the answer below:
jQuery multiple document ready queue order
I do something like this:
$("#id1").html(data);
I refill a div with html but when I try to get the html of a child of this refilled div I get an empty string although it has, it's like the old child is still there but without html.
Edit:
I tried to reproduce my problem, here is the html: (click 2x times on refill and after click open you will see that nothing is going to happen)
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/dot-luv/jquery-ui.css"/>
</head>
<body>
<script type="text/javascript">
$(function(){
$("#r1").click(function(){
var x = $("#main").html();
$("#main").html(x);
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<script type="text/javascript">
$(function(){
$("#a1").click(function(){$("#forDialog").dialog();});
$("#a2").click(function(){$("#forDialog").dialog('close');});
});
</script>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
</body>
</html>
I'm generating this javascript dynamically so the scripts that register a1.click and a2.click need to be inside the main div
I'm not quite sure as to the exact goal of your code, but I can make 3 general suggesions:
Use .delegate() to attach to once and future elements.
You can .hide() the HTML for you dialog box.
You can prevent the page from refreshing when a link is clicked using event.preventDefault(); in the click handler of that link.
Applying those suggestions to your code results in the following working code:
<script type="text/javascript">
$("body").delegate("#a1", "click", function(){
$("#forDialog").dialog();
});
$("body").delegate("#a2", "click", function(){
$("#forDialog").dialog('close');
});
$(function(){
// Hide HTML for the dialog.
$("#forDialog").hide();
$("#r1").click(function(event){
var x = $("#main").html();
$("#main").html(x);
// If you don't want the page to refresh by clicking
// on this A element, use the following:
event.preventDefault();
});
});
</script>
refill
<div id="main">
<a id="a1" href="#" >open</a>
<div id="forDialog">
hi
<a id="a2" href="#" >close</a>
</div>
</div>
jsFiddle example
The old sub-DOM under the element will be gone after you reset its content with .html(stuff). It may exist floating around in memory somewhere, but it's detached from the DOM and you can't get at it.